HTML表格bgcolor无法填充侧边，无法实现封闭样式求助

你遇到的问题根源在于表格默认的单元格间距（cellspacing）以及thead、tbody的背景色覆盖，而且bgcolor是过时的HTML属性，建议用CSS统一实现封闭的黑色边框表格效果，具体方案如下：

• 给表格设置border-collapse: collapse，让单元格边框合并，同时添加黑色边框包裹整个表格
• 移除所有bgcolor属性，用CSS单独控制表头、tbody的背景色
• 调整内边距让内容布局更合理，同时修正语义化标签问题

修改后的完整代码：

body {
  padding: 8px;
}
#tableCheckins {
  border-collapse: collapse;
  border: 2px solid black; /* 黑色边框包裹整个表格 */
  width: 100%; /* 可选：让表格撑满容器宽度 */
}
#tableCheckins thead tr {
  background-color: grey;
}
#tableCheckins thead th {
  color: #0F0104;
  padding: 8px 60px 8px 8px; /* 统一内边距，替代单一padding-right */
}
#tbCheckins {
  background-color: lightgrey;
}
#tbCheckins td {
  padding: 8px; /* 给tbody单元格添加内边距，提升美观度 */
}

<table class="table" id="tableCheckins">
  <thead>
    <tr>
      <th value="CheckIn">Check-In</th>
      <th value="CheckOut">Check-Out</th>
      <th value="TotalHours">Working Hours</th>
      <th></th> <!-- 将空td改为th，符合表头语义规范 -->
    </tr>
  </thead>
  <tbody id="tbCheckins">
    <!-- 此处添加数据行 -->
  </tbody>
</table>

额外提示：如果需要更粗的边框效果，可调整border属性的像素值；若不需要表格撑满容器，可去掉width: 100%。

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