设置表格行的背景颜色

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>

你如何改变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>