基于Div实现的表格：多列共享居中分组表头需求

我来帮你搞定这个多列共享单个居中表头的需求！咱们可以通过调整HTML结构和CSS定位来实现你想要的效果，具体步骤如下：

思路说明 #

我们需要移除原来每行顶部的独立表头，转而在整个表格顶部添加一个跨列居中的分组表头，利用CSS定位让它精准地显示在对应列组的上方，同时保证下方的数据列布局不受影响。

修改后的完整代码 #

HTML部分 #

<div class="table-container">
  <!-- 新增的分组表头 -->
  <div class="table-header">---Header---</div>
  <div class="table">
    <div class="table-row">
      <div class="table-cell">a</div>
      <div class="table-cell">b</div>
      <div class="table-cell">C</div>
      <div class="table-cell">d</div>
    </div>
    <div class="table-row">
      <div class="table-cell">1</div>
      <div class="table-cell">2</div>
      <div class="table-cell">3</div>
      <div class="table-cell">4</div>
    </div>
    <div class="table-row">
      <div class="table-cell">p</div>
      <div class="table-cell">q</div>
      <div class="table-cell">R</div>
      <div class="table-cell">S</div>
    </div>
  </div>
</div>

CSS部分 #

.table-container {
  position: relative;
  margin: 20px;
}

.table-header {
  position: absolute;
  top: -30px; /* 调整距离表格顶部的间距 */
  left: 0;
  width: 100%;
  text-align: center;
  padding: 5px 0;
  font-weight: bold;
}

.table {
  display: table;
  border-collapse: collapse;
  width: fit-content;
  margin-top: 30px; /* 给表头留出空间 */
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
  border: 1px solid #ccc;
  padding: 8px 12px;
  text-align: center;
}

关键调整说明 #

1. 容器相对定位：给.table-container设置position: relative，让内部的绝对定位表头以容器为基准，避免偏移到页面其他位置。
2. 表头绝对定位：.table-header用position: absolute固定在表格顶部，width: 100%确保覆盖所有列，text-align: center实现居中显示，top: -30px调整表头与表格的间距。
3. 表格间距预留：给.table添加margin-top: 30px，避免表头和第一行数据重叠。
4. 移除原有行内表头：删掉了原来每行顶部的表头元素，让数据行直接排列，保持表格结构简洁。

这样调整后，就能实现你想要的“单个表头居中显示在对应列组上方”的效果啦！

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