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

Question

当我有一个每行列数不同的表格时，如何填充(使用 background-color)整个表格行？

我有一个这样的表:

但我想给整条线着色，就像这样(用相同的颜色，而不是黄色):

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

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

Answer 1

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

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>