html - 在CSS中填充整个表格行

当我的表中每行的列数不同时，如何填充（用background-color）整个表行？

我有一张这样的桌子：



但是我想像这样将整行着色到最后（用相同的颜色，而不是黄色）：



现在，我正在尝试这样做：

tr:nth-child(2n+1) {
    background-color: rgb(240, 240, 240);
}

最佳答案

您需要在第1行和第2行的最后一个colspan上设置td，否则它将不会延伸到整个表格宽度。

table, body {
    margin-top: 0px;
    padding-top: 0px;
    text-align: top;
    border-collapse: collapse;

}

td#naglowek {
    font-family: verdana;
    font-size: 14px;
    font-weight: bold;
    text-align: left;
    background-color: black;
    color: white;
}

td:first-child {
    font-family: verdana;
    font-size: 10px;
    font-weight: bold;
    text-align: left;
}

tr:nth-child(2n+1) {
	background-color: Red;
}

td {
    font-family: verdana;
    font-size: 10px;
    text-align: left;
    padding-top: 2px;
    padding-bottom: 2px;
}

th {
    padding-top: 10px;
    font-family: verdana;
    font-size: 9px;
    font-weight: bold;
    border-bottom: solid 0px black;
    text-align: left;
}

    <table>
        <tr>
            <td>Imie</td>
            <td colspan='3'>Wartosc</td>
        </tr>
        <tr>
            <td>Nazwisko</td>
            <td colspan='3'>Wartosc</td>
        </tr>
        <tr>
            <td>Adres</td>
            <td><b>Kraj</b></td>
            <td><b>Województwo</b></td>
            <td><b>Miejscowość</b></td>
        </tr>
        <tr>
            <td></td>
            <td>Wartość</td>
            <td>Wartość</td>
            <td>Wartość</td>
        </tr>
     </table>

更新资料

根据您的评论，其中的解决方案不需要空白的td和colspan，经过一番思考，我想出了这个技巧，尽管您需要在所有主要的浏览器中进行测试以确保没有问题，但还是可以采用这种技巧。它可以正常工作（我在Windows上成功使用Chrome，FF，Edge，IE11对其进行了测试）。

table, body {
    margin-top: 0px;
    padding-top: 0px;
    text-align: top;
    border-collapse: collapse;
}

td#naglowek {
    font-family: verdana;
    font-size: 14px;
    font-weight: bold;
    text-align: left;
    background-color: black;
    color: white;
}

td:first-child {
    font-family: verdana;
    font-size: 10px;
    font-weight: bold;
    text-align: left;
}

td {
    font-family: verdana;
    font-size: 10px;
    text-align: left;
    padding-top: 2px;
    padding-bottom: 2px;
}

th {
    padding-top: 10px;
    font-family: verdana;
    font-size: 9px;
    font-weight: bold;
    border-bottom: solid 0px black;
    text-align: left;
}

/* begin - fix for full width background color */
table {
  overflow: hidden;
}
tr:nth-child(2n+1) td:first-child {
  position: relative;
}
tr:nth-child(2n+1) td:first-child:after {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100vw;
  background-color: red;
  z-index: -1;
}
/* end - fix for full width background color */

<table>
        <tr>
            <td>Imie</td>
            <td>Wartosc</td>
        </tr>
        <tr>
            <td>Nazwisko</td>
            <td>Wartosc</td>
        </tr>
        <tr>
            <td>Adres</td>
            <td><b>Kraj</b></td>
            <td><b>Województwo</b></td>
            <td><b>Miejscowość</b></td>
        </tr>
        <tr>
            <td></td>
            <td>Wartość</td>
            <td>Wartość</td>
            <td>Wartość</td>
        </tr>
     </table>

关于html - 在CSS中填充整个表格行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35942708/