html - HTML and CSS Table

Question

I have a table like in picture:

Is it possible to achieve this with pure table (tbody,th,td,tr,thead) css, any example ? Generally I have trouble with rounded corners with border ?

Answer 1

对的，这是可能的。但是对于某些属性的浏览器前缀会有一些问题。

有很多方法可以绕过它，最好的方法是使用 css 处理器（例如：compass）。或者只是谷歌圆角，你会找到你想要的

这是一篇详细讨论它的帖子。

所以对于圆角，这将是：

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */

关于交替着色，您可以使用 css3 psudo-selector ：

请看这个帖子

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

这会工作得很好，但在旧浏览器中这不会工作，所以如果你想支持旧的 bo​​rwers，请为每个 .

.even-td {background: #CCC}
.odd-td {background: #FFF}

JSFIDDLE DEMO

Answer 2

要获得圆角，您可以使用 css 之类的（您必须始终折叠边框才能使其变圆）

 table {
        border-collapse: separate;
        border-spacing: 0;
    }
    table, td {
        border: 1px solid black;
        border-radius: 5px;
        -moz-border-radius: 5px;
        padding: 5px;
    }

对于不同的颜色，你可以做这样的事情。

    tr.d0 td {
    background-color: #CC9999; color: black;
}
tr.d1 td {
    background-color: #9999CC; color: black;
}

HTML：

<table>
<tr class="d0"><td>One</td><td>one</td></tr>
<tr class="d1"><td>Two</td><td>two</td></tr>
</table>

Answer 3

我的小提琴似乎只适用于边界半径

table {
    background: lightblue;
    border-radius: 4px;
    border: 1px solid #000;
}