在 CSS 中填写整个 table 行

Question

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

我有一个 table 这样的：

但是我想给整条线着色，就像这样（颜色相同，不是黄色）：

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

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

Answer 1

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

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>

Answer 2

您可以简单地将 colspan 属性添加到您的 table 行，其中这些行的单元格数少于全部。例如 <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>

在 CSS 中填写整个 table 行

Fill entire table row in CSS

html

css

background-color

css-tables