嘿，别着急，这种表头堆叠的问题在新手做响应式表格时挺常见的，我来帮你捋捋可能的原因和解决办法～

核心问题分析 #

你遇到的黑色表头行堆叠，大概率是因为你用的响应式CSS对表头元素的布局处理不当——比如强制把<th>改成了块级元素，但没给表头行（<thead> tr）设置合适的布局规则，导致所有表头挤在了一起。下面给你两种实用的解决方案，按需选择就行。

方案1：移动端卡片式响应表格（推荐，体验友好） #

这种方案会在移动端把表格转换成卡片样式，每个数据行单独展示，表头会作为数据的标签显示在左侧，同时隐藏原来的黑色表头行（不会堆叠），桌面端保持正常表格布局。

第一步：调整HTML结构（确保规范）

先确认你的表格有<thead>和<tbody>的正确划分，每个表头对应<th>，并给数据单元格加上data-label属性（值对应表头文本）：

<table>
  <!-- 黑色表头行 -->
  <thead>
    <tr>
      <th>赛事名称</th>
      <th>免费投注金额</th>
      <th>领取条件</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="赛事名称">英超第10轮</td>
      <td data-label="免费投注金额">£10</td>
      <td data-label="领取条件">首次存款满£20</td>
    </tr>
    <!-- 更多数据行... -->
  </tbody>
</table>

第二步：替换响应式CSS代码

把你原来的CSS换成这段，它会同时兼顾桌面和移动端的显示效果：

/* 桌面端表格基础样式，保留你的黑色表头 */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}
thead tr {
  background-color: #000;
  color: #fff;
}
th, td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

/* 移动端响应式处理 */
@media (max-width: 768px) {
  /* 将表格相关元素转为块级，实现卡片布局 */
  table, thead, tbody, th, td, tr {
    display: block;
  }
  
  /* 隐藏默认的黑色表头行，避免堆叠 */
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  /* 给每个数据行添加边框，区分成卡片 */
  tr {
    margin-bottom: 1.5rem;
    border: 1px solid #eee;
    border-radius: 4px;
  }
  
  /* 数据单元格设置相对定位，留出空间放表头标签 */
  td {
    position: relative;
    padding-left: 50%;
    text-align: right;
    border-bottom: none;
  }
  
  /* 通过data-label属性生成表头标签，显示在左侧 */
  td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 45%;
    padding-left: 0.75rem;
    font-weight: bold;
    text-align: left;
    color: #000;
  }
}

方案2：横向滚动式响应表格（操作简单） #

如果你的表头不多，也可以用横向滚动的方案——移动端表格会允许横向滑动，表头不会堆叠，完全保留原来的黑色表头行样式，操作更简单。

第一步：给表格套一个容器

<div class="table-scroll-container">
  <table>
    <!-- 你的原有表格内容，不需要修改td属性 -->
    <thead>
      <tr>
        <th>赛事名称</th>
        <th>免费投注金额</th>
        <th>领取条件</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>英超第10轮</td>
        <td>£10</td>
        <td>首次存款满£20</td>
      </tr>
    </tbody>
  </table>
</div>

第二步：添加CSS代码

.table-scroll-container {
  overflow-x: auto; /* 开启横向滚动 */
  margin: 1rem 0;
}
table {
  width: 100%;
  border-collapse: collapse;
}
thead tr {
  background-color: #000;
  color: #fff;
}
th, td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

这两种方案都能解决你说的表头堆叠问题，你可以根据自己的需求选一个试试～

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