设置表格行的背景颜色

Question

我有一个跨越整个页面的表格。

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

您可以在这里看到示例。

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>

如何更改整行的背景颜色而不是每个单元格的背景颜色？

- Patrick Jennings

Answer 1

在 table 中添加 border-collapse:collapse 属性。

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>

- dippas

Answer 2

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

这里是更新后的table规则：

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

曾经在HTML中，表格的边距和内边距主要由cellspacing和cellpadding属性控制。

<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

- Michael Benjamin

Answer 3

将以下代码添加到您的HTML中：

<table cellspacing="0">

或者通过CSS

table {border-spacing: 0;}

- sjm

---

"cellspacing"已被弃用。 - dippas

Answer 4

默认情况下，边框之间存在一些间距。要去除间距，请使用

table {
    border-collapse: collapse;
}

或者

table {
    border-spacing: 0;
}

border-collapse: collapse会将单元格的边框合并为一个边框，而border-spacing: 0会减少单元格之间的间距，以显示为单个边框。我更喜欢使用border-collapse，因为它的目的是将边框合并为单个边框。

- Muhammad