如何让列数不均的表格奇偶行背景色铺满整行

问题根源 #

当前表格默认使用border-collapse: separate属性，单元格之间存在空隙，行（<tr>）的背景色不会填充这些空隙；同时表格未设置宽度，列宽由内容决定，导致列数较少的行背景色只能覆盖有单元格的区域，无法铺满整行。

修改方案 #

通过以下CSS调整即可解决：

• 给表格添加border-collapse: collapse，合并单元格边框，消除单元格间的空隙，让行背景色能覆盖整个行区域。
• 给表格设置width: 100%（或固定宽度，比如width: 600px），确保表格占满容器宽度，列数少的行背景色也能铺满整个表格宽度。
• 可选：添加table-layout: fixed，让表格列宽平均分配，避免列宽因内容差异过大。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    table{
      border: 5px solid;
      border-collapse: collapse; /* 合并单元格边框，消除空隙 */
      width: 100%; /* 让表格占满容器宽度 */
      /* 可选：固定表格布局，列宽平均分配 */
      /* table-layout: fixed; */
    }    
    tr:nth-child(even) {background-color: blue;}
  </style>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table class="mytable">
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
      </tr>
      <tr>
        <td>Data 1</td>
      </tr>
      <tr>
        <td>Data 3</td>
        <td>Data 4</td>
      </tr>
      <tr>
        <td>Data 5</td>
        <td>Data 6</td>
        <td>Data 7</td>
      </tr>
    </table>
  </body>
</html>

效果说明 #

修改后，所有偶数行的背景色会完整铺满整个表格宽度，包括列数不足的行，同时单元格间的空隙被消除，表格样式更规整。

内容的提问来源于stack exchange，提问作者harvy666