HTML和CSS表

我有一张如图所示的桌子：

---

使用纯表格（

tbody

，

th

，

td

，

tr

，

thead

）css，有可能实现这一点吗？一般来说，我对带边框的圆角有问题？

要获得圆角，可以使用css（在使边框变圆之前，必须始终折叠边框）

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

    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>

一个
二二

似乎只在边界半径范围内工作

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

---

是的，这是可能的。但在某些方面，浏览器前缀会有一些问题

有很多方法可以解决这个问题，最好是使用css处理器（例如：）。 或者只是谷歌圆角，你会找到你想要的

下面是一个详细讨论的例子

因此，对于圆角，这将是：

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

关于交替着色，您可以使用css3 psudo选择器：

请看这个

这将很好地工作，但在较旧的浏览器中，这将不起作用，因此，如果您想支持较旧的Borwer，请为每个浏览器使用单独的类

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

---

您是否尝试过给表格一个

边界半径：5px；border:1px solid#000

？那么它没有圆角您需要

border collapse:collapse

放在桌子上吗？@Ruddy他会在那里做什么？粘贴在他的图像中，并查询“是否可以用纯表实现这一点”？如果某人不确定如何达到预期的结果，告诉他用谷歌搜索是没有帮助的。@RGraham真的吗？让一张桌子看起来像那样是你可以用谷歌搜索的东西。简单地用谷歌搜索“漂亮的HTML CSS表格”，我相信你会找到很多可以给出答案的结果。我认为他的问题还需要在圆角上折叠单元格间距。我不会称不固定的边界半径为“未来”。据了解，仅存的webkit是iOS 3.2和Android 2.1。没有-moz前缀或konqueror前缀。@vals这只是css技巧的复制和粘贴。我想当那篇文章写出来的时候，它已经是未来了。

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

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