html - 表の行の境界線の半径が機能しない - 代替案?

Question

ここで私のウェブサイトを見ると: http://mcderp.x10.mx/members.php、一番下の行にカーソルを合わせると、行の角が丸くなっていないことがわかります。「オーバーフロー:角が丸くなっているテーブルクラスに「hidden」を追加しましたが、これは機能しません! :(

Answer 1

個々のセルのスタイルを設定する必要があります。Firefox と Chrome での作業例: http://jsfiddle.net/AyKE7/

CSS

table {
    border-collapse: collapse;
}
th,
td {
    padding: 4px 7px;
}
/* hover */
tr:hover th,
tr:hover td {
    background-color: lightblue;
}
/* hover, left cell */
tr:hover th {
    border-radius: 5px 0 0 5px;
}
/* hover, last cell on he right */
tr:hover td:last-child {
    border-radius: 0 5px 5px 0;
}

Answer 2

インスペクターを見ると、1 つのバージョンしか宣言されていないため、ベンダー プレフィックスを追加する必要があります。それはクロムでうまく動作します

.myClass
{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

Answer 3

このサンプルを試してください - これは CSS の問題を修正するのに役立ちます。この CSS は、Firefox、Safari/Chrome、Opera、さらには IE9 ブラウザーで動作します。

.bottomRow {
    -moz-border-radius-bottomright: 50px; border-bottom-right-radius: 50px;
    -moz-border-radius-bottomleft: 50px; border-bottom-left-radius: 50px;
}