Question

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

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

您可以看到示例here

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Answer 1

将border-collapse:collapse添加到table

border-collapse CSS属性决定了表格的边框   分开或折叠。在分离的模型中，相邻的细胞   每个都有自己独特的边界。在折叠模型中，相邻   表格单元格共享边界。

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

在折叠边框模型中，相邻的表格单元格共享边框。在   那个模型，插图的边框式值就像凹槽一样   开头表现得像山脊。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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，因为它的目的是将边框合并为单边框。

设置表格行的背景颜色

4 个答案: