0

テーブル内の 2 つのセル間を移動できるカーソルが必要です。これが jsFiddle です: http://jsfiddle.net/KNc5u/

テーブルをクリックすると、カーソルはセル全体の選択、セルの下部と上部の選択を繰り返します。

ご覧のとおり、境界線の幅が変わるため、カーソルの移動中にテーブルが「ジャンプ」します。これは醜いです。どうすればこれを防ぐことができますか?

制約:

  • カーソルは 2 ピクセル幅でなければなりません (1 ピクセルでも 3 ピクセルでもありません)。
  • 純粋な CSS を推奨
  • HTML 要素を追加しないでください (各セルを 1 ピクセルの白い境界線で囲んで黒くすることで簡単に行うことができますがdiv、DOM にジャンクを追加しないソリューションを探しています)。
  • CSS3はOK
  • 私はIE10+と一緒に暮らすことができます:-)
4

3 に答える 3

3

あなたがcss3で大丈夫だと言ったように、あなたはボックスシャドウをいじることができます：http: //jsfiddle.net/KNc5u/10/

この例は最新のブラウザでのみ機能し、やなどのベンダープレフィックスは使用していません。他のブラウザをサポートする必要がある場合は、これらのプレフィックスを既存のボックスシャドウプロパティに簡単に追加できます。-moz-webkit

必要に応じて色のキーワードを自由に変更してください…</p> 

td {
    text-align:center;
    border:1px solid blue;
    padding:1px 2px
}

.selected {
    display:block;
    border:none;
    box-shadow: inset 0 0 -2px 0 #000;
}

.selBottom {
    display:block;
    border:0;
    box-shadow: 0 0 black inset, 0 -2px red inset, 0 0 black inset, 0 0 black inset;
}

.selTop {
    display:block;
    border:0;
    box-shadow: 0 2px green inset, 0 0 black inset, 0 0 black inset, 0 0 black inset;
}

アップデート

これが更新されたバージョンです（imho to hacky）：http ://jsfiddle.net/KNc5u/13/

ただし、提供されたマークアップの問題は修正されるはずです。tdヒントがあることに注意してください。この例は、とあなたのselected、selBottomおよびselTopクラスの色が似ている場合にのみ適切な方法で機能します。

アップデート2

現在、左右のサポートがあります：http: //jsfiddle.net/KNc5u/15/

于 2013-01-02T11:33:39.900 に答える
0

paddingに追加することで、テーブルの動きを減らすことができます。td

td { border: 1px solid blue; padding:4px}

デモ

于 2013-01-02T10:56:52.760 に答える
0

a のoutline代わりに aを使用しborder、パディングを削除します。

http://jsfiddle.net/KNc5u/3/

または、アウトラインを使用する代わりに、セルの背景色を変更して強調表示します。

編集: 上/下のみを実行しないように Erp します。面倒なことをせずに、それは非常にトリッキーであることがわかりました。ここでは、作業カーソルで背景色を使用した素敵なバージョンを用意しています (任意のセルをクリックします) http://jsfiddle.net/KNc5u/7/

表のセルのサイズが固定されている場合は、背景画像を使用して、さまざまな種類のハイライト カーソルを与えることもできます。

于 2013-01-02T10:43:23.487 に答える