填写CSS中的整个表行

Question

如果每行中有一个包含不同列数的表，我如何填充（background-color）整个表格行？

我有一张这样的表：

但是我想把整条线染色到最后，就像这样（颜色相同，不是黄色）：

现在，我正试图这样做：

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

Answer 1

您需要在第1行和第2行的最后~ no response on stdout ~设置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的解决方案，经过一番思考后，我想出了这个技巧，这可能是另一种选择，但您需要对其进行测试在所有主流浏览器中确保它有效（我在Windows上使用Chrome，FF，Edge，IE11测试成功）。

colspan

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

Answer 2

您只需将colspan属性添加到表格行中，其中行数少于完整的单元格数。例如<td colspan="3">Wartosc</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>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>