设置 table 行的背景颜色

Question

我有一个横跨整个页面的 table。

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

你可以看一个例子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

将此添加到您的 HTML：

<table cellspacing="0">

或通过CSS

table {border-spacing: 0;}

Answer 2

将 border-collapse:collapse 添加到 table

The border-collapse CSS property determines whether a table's borders are separated or collapsed. In the separated model, adjacent cells each have their own distinct borders. In the collapsed model, adjacent table cells share borders.

The separated model is the traditional HTML table border model. Adjacent cells each have their own distinct borders. The distance between them given by the border-spacing property.

In the collapsed border model, adjacent table cells share borders. In that model, the border-style value of inset behaves like groove, and outset behaves like ridge.

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 3

对此的 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

Answer 4

默认情况下，边框之间有一些间距，要删除间距，请使用

table {
    border-collapse: collapse;
}

或

table {
    border-spacing: 0;
}

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

设置 table 行的背景颜色

Setting background color of a table row

html

css

html-table