如何为表格列标题间的空白区域填充背景色？

表格列之间的空白是因为浏览器默认的表格边框分离规则导致的，只需给表格添加border-collapse: collapse;样式即可消除间隙，让首行背景色完全填充整行。修改后的代码如下：

<table style="width:100%; border-collapse: collapse;">
  <tr style="background-color:#820000;color:white;font-family:sans-serif;">
    <td style="width:6%; padding: 8px;">
      Item #
    </td>
    <td style="width:75%; padding: 8px;">
      Description
    </td>
    <td style="width:8%; padding: 8px;">
      Quantity
    </td>
    <td style="width:7%; padding: 8px;">
      Price
    </td>
    <td style="width:4%; padding: 8px;">
      Cost
    </td>
  </tr>
</table>

关键说明： #

• border-collapse: collapse;：强制表格边框与单元格边框合并，彻底消除列之间的空白间隙，使首行背景色铺满整个行宽。
• 可选的padding: 8px;：给单元格添加内边距，避免内容紧贴边框，提升可读性，你可以根据需求调整数值。

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