如何在 table 中正确设置 tbody 元素的背景颜色？

Question

我有一个 table 由多个 tbody 元素组成，这些元素由多个 tr 行组成：

<table>
    <thead>[...]</thead>
        <tbody>
            <tr><td></td></tr>
            <tr><td></td></tr>
        </tbody>
        <tbody>
            <tr><td></td></tr>
            <tr><td></td></tr>
        </tbody>

        &c...

</table>

当试图给 table 的 children tbody 元素一个背景颜色时（使用 table tbody:nth-child(even){}），只有整个 tbody 元素的一部分是彩色（即单个细胞）。 table 的背景颜色总是部分透亮。

我怎样才能得到一个均匀的 tbody 单一颜色的区域，以便可以轻松区分不同的元素？

我在搜索过程中偶然发现 ()，标题暗示了完全相同的问题，但该问题的其余部分更具体，实际上是关于让 border-radius 与集合合作背景颜色。

Answer 1

由于 table 元素的边框是这里的罪魁祸首，我们需要摆脱这些：

将 cellspacing='0' cellpadding='0' 添加到您的 table html 代码 (<table cellspacing='0' cellpadding='0'>)。
将 border:none 添加到 table 的 CSS。

现在 table 应该正确呈现，没有任何其他颜色的线条穿过，但我们可能想重新引入元素周围的 space。
实现这一点的最简单方法是给 td 元素一些填充（例如 table tbody td {padding-top:1em}）。由于这不会干扰 tbody 元素的设置背景颜色，因此可用于重新对齐和重新 space 您的 table.

如何在 table 中正确设置 tbody 元素的背景颜色？

How do I properly set the background colour of tbody elements in a table?

html

css

html-table

background-color

html-tbody