ホバー上の表の行

Question

ホバー上の表の行の境界を強調表示しようとしています。残念ながら、これはセルの最初の行でのみ機能します。下の行には、色が変わらない境界線が1つあります。私はoutlineを使用しようとしましたが、Webkitの:hoverでうまくいきません。

http://jsfiddle.net/S9pkM/2/

あなたの標準テーブルのHTMLを想像してみてください。いくつかのtdといくつかのtrのです。行の上にカーソルを置くと、枠線が赤で強調表示されます。

table { border-collapse: collapse; } /*I am aware of separate */ 
table td { border: 3px solid black; } 
table tr:hover td { border-top-color: red; border-bottom-color: red; } 
table tr:hover td:first-child { border-left-color: red; } 
table tr:hover td:last-child { border-right-color: red; } 

私は別の方法を使用していますが、私はテーブル構造に固執しています。標準以外に追加のhtmlを挿入しない<table> <tr> <td>

Answer 1

を私はこの同じ問題に直面し、最終的には簡単な解決策hereを見つけてきました。あなたは1pxのボーダーのために働く、このCSSのトリック（border-style: double;）を使用することができます

：

#mytable tr.row:hover td 
{ 
    border-style: double; 
    border-color: red; 
} 

をこれがどんな（1ほとんどのトップも）あなたのborder-color作業を行いません。 :-)

Answer 2

なぜボーダーを使用しないのですか？ http://jsfiddle.net/S9pkM/6/

Answer 3

1pxの境界については、border-style: doubleを使用するLenielのソリューションを参照してください。これははるかに簡単です。ダブルボーダーは、ボーダーの内側と外側のエッジの1ピクセルラインを表示します。これは1pxボーダーでは何も行いませんが、> 1pxではギャップがあります。

境界線が> 1ピクセルの場合、<td>のすべての下部境界線をborder-bottom: 0で削除します。他のセルの上の境界線は、最後の行を除いて、必要な方法をすべて探しています。最後の行はtr:last-child td { border-bottom: your border style }です。最後に、あなたのホバリング擬似クラスで、下の境界線を設定します。

http://jsfiddle.net/S9pkM/16/

table { border-collapse: collapse; } /*I am aware of separate */ 
table td { border: 1px solid black; width: 50px; height: 25px; padding: 5px; border-bottom: 0; } 
table tr:last-child td { border-bottom: 1px solid black; } 
table tr:hover td { border-top-color: red; border-bottom: 1px solid red; } 
table tr:hover td:first-child { border-left-color: red; } 
table tr:hover td:last-child { border-right-color: red; } 

Answer 4

ちょうどあなたの頭の部分にこのコードを置く：

<style> 
    table td { border: 2px solid transparent; width: 50px; height: 50px; padding: 5px 5px 5px 5px;} 
    table td:hover {border:2px solid red; } 
</style>