html - 表格行边框半径不起作用 - 替代方案？

Question

如果您在这里查看我的网站：http: //mcderp.x10.mx/members.php，当悬停在底行上时，您可以看到该行没有圆角，我尝试应用“溢出：隐藏到具有圆角的表类中，但这不起作用！:(

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

查看检查器，您只声明了一个版本，您需要添加供应商前缀。它在 chrome 中运行良好

.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;
}