设置表格行的背景颜色

Question

我有一张遍布整个页面的表格。

我是在nth-child上使用tr进行斑马条纹设置行的background。问题是它只是着色细胞而不是整行。您可以在彩色行的每个单元格之间看到空白区域。

你可以看到一个例子here

table {
    width: 100%;
}
tr:nth-child(even) {
    background: peachpuff;
}

<table>
    <tbody>
        <tr>
            <td>0</td>
            <td>0</td>
        </tr>
        <tr>
            <td>1</td>
            <td>0</td>
        </tr>
        <tr>
            <td>2</td>
            <td>0</td>
        </tr>
        <tr>
            <td>3</td>
            <td>0</td>
        </tr>
        <tr>
            <td>4</td>
            <td>0</td>
        </tr>
        <tr>
            <td>5</td>
            <td>0</td>
        </tr>
        <tr>
            <td>6</td>
            <td>0</td>
        </tr>
        <tr>
            <td>7</td>
            <td>0</td>
        </tr>
        <tr>
            <td>8</td>
            <td>0</td>
        </tr>
        <tr>
            <td>9</td>
            <td>0</td>
        </tr>
    </tbody>
</table>

你如何改变整行的background颜色而不是每个单独的细胞？

Answer 1

将border-collapse:collapse添加到table

border-collapse CSS属性确定表的边框是分开还是折叠。在分离的模型中，相邻的单元格各自具有不同的边界。在折叠模型中，相邻的表格单元共享边框。

分离的模型是传统的HTML表格边框模型。相邻的细胞各自具有其独特的边界。它们之间的距离由border-spacing属性给出。

在折叠边框模型中，相邻的表格单元格共享边框。在该模型中，插入的边框样式值表现得像凹槽，并且开头表现得像脊。

table {
    width: 100%;
    border-collapse:collapse;
}
tr:nth-child(even) {
    background: peachpuff;
}

<table>
    <tbody>
        <tr>
            <td>0</td>
            <td>0</td>
        </tr>
        <tr>
            <td>1</td>
            <td>0</td>
        </tr>
        <tr>
            <td>2</td>
            <td>0</td>
        </tr>
        <tr>
            <td>3</td>
            <td>0</td>
        </tr>
        <tr>
            <td>4</td>
            <td>0</td>
        </tr>
        <tr>
            <td>5</td>
            <td>0</td>
        </tr>
        <tr>
            <td>6</td>
            <td>0</td>
        </tr>
        <tr>
            <td>7</td>
            <td>0</td>
        </tr>
        <tr>
            <td>8</td>
            <td>0</td>
        </tr>
        <tr>
            <td>9</td>
            <td>0</td>
        </tr>
    </tbody>
</table>

Answer 2

CSS解决方案使用border-spacing和border-collapse属性。

这是你的table规则，更新：

table {
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}

过去，表格中的边距和填充主要是使用cellspacing和cellpadding属性在HTML中控制的。

<table border="1" cellpadding="5" cellspacing="10"> ... </table>

但是这些属性现在正在走向过时。使用CSS。

例子

table {
    border-collapse: separate;
    border-spacing: 5px;
}

td {
    padding: 5px;
}

要了解有关border-collapse的更多信息，请参阅此文章。 https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse

Answer 3

将其添加到您的HTML：

<table cellspacing="0">

或者通过CSS

table {border-spacing: 0;}

Answer 4

默认情况下，边框之间有一些间距，以消除间距使用

table {
    border-collapse: collapse;
}

要么

table {
    border-spacing: 0;
}

border-collapse: collapse将细胞的边界合并到一个边界，而border-spacing: 0将减少细胞之间的空间以显示它作为单边界。我更愿意使用border-collapse，因为它的目的是将边框合并为单边框。