6

各セルがクリック可能な HTML テーブルを作成したいのですが、セルをクリックすると、セルdiv内の単一のセルに境界線が追加されます。テーブルまたはそのセルのサイズをまったく変更せずに、その境界線がそれを含むdiv既存の境界内に完全に存在するようにします。tdこれを正しく行うことができないようです。

この前の質問は同じ問題に対処しているようで、ボックスのサイズ変更に関する CSS オプションに関するいくつかの記事を示しています。これを成功させずに実装しようとしたフィドルがあります: http://jsfiddle.net/YsAGh/3/。

* {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}


<table>
  <tr>
    <td><div>1</div></td>
    <td><div>2</div></td>
    <td><div>3</div></td>
  </tr>
  ....
</table>

これが現在起こっていることです。境界は、 の境界を収容するために包含tdを拡大しdivます。

td のサイズを変更せずに赤い境界線を表示したい

含まれているテーブルに影響を与えずに、境界線を div に追加するにはどうすればよいですか?

4

4 に答える 4

1

私のJSFiddleを見てください。

セルに幅/高さを指定する必要があります。

td {
    // ...
    width:33.3%;
    height:33.3%;
}
于 2013-08-26T22:38:36.420 に答える
1

インセットボックスシャドウを使用するのはどうですか?

.selected {
    box-shadow: inset 0px 0px 0px 2px red;
}
于 2013-08-26T22:39:48.063 に答える