html - 標準の幅/高さを台無しにするテーブル要素のホバー時の境界線

Question

テーブル (カレンダー) があり、各 td 要素に CSS ホバーがあります。このホバーに境界線を設定していますが、セルの幅と高さが台無しになります (つまり、新しい境界線によって次の行が少し下に押し出されるなど)。

これを回避する方法はありますか？

score 2 · Accepted Answer

すべての td 要素に td 背景と同じ色の境界線を設定し、境界線の色 (幅ではなく) のみを変更して、幅と身長。

元の境界線は、色が背景と一致するため、ユーザーには見えません。

score 1 · Accepted Answer

（ホバーがトランジションによって滑らかにされていない場合）ボックスにパディング（5pxとしましょう）を設定し、ホバーで2pxの境界線を追加してパディングを3pxにすることができます。箱の端。

score 0 · Accepted Answer

オブジェクトの高さの合計に「境界」プロパティが追加されないため、CSS はこれを行うことで有名です。マージンのように動作します。できることは、CSS ファイルの <td> セレクターにいくつかのマージンルールを追加することです。

td.hoverable {
  border:1px solid #00F;
  margin:-1px;
}

そのため、ホバーすると、新しい「マージン」ルールも有効になり、それによって <td> の領域が 1px 縮小され、境界線が表示されるようになります。

編集：おっと、はい。つまりmargin:-1px;:)ありがとう！

3 に答える 3