我如何重新排列表格显示，以便每个 th 都高于它的特定 td？

debugcn 发表于 Dev

编码之夜2000

我有一个包含 1 个描述文本和 5 个 td（链接）的表格。

看 jsfiddle here

我正在尝试更改移动设备表格的显示。所以 th（描述文本）将在 1 行中居中。在它下面，在不同的行中，5 个 td 将占用 100% 的宽度。

这是我想要展示的桌子：

起初，我尝试为此使用 flexbox。使用 tr 作为容器，然后我尝试将 th（描述文本）放在 1 个 div 中，将 5 个 tds 放在第二个 div 中。但不幸的是，这不起作用，因为似乎 div 不能是 tr 的直接子级。

由于某些原因，我必须保持表格结构。

任何想法如何获得我的特定显示目标？谢谢

用户7207170

由于您需要categoryText单独位于不同的行中，只需为它创建一个单独的行colspan="5"（它占用 5 个列空间），因为每行将占用 5 个列宽。
然后，您可以使用text-align:center来对齐内容在中心各自的细胞。

您不能在 tr 外部或直接在 tr 内部使用 div将其作为 flex 应用以更改布局。您可以将 div 包装在您的 th 或 td 中，但这对您想要实现的目标也无济于事，如果您希望表格像“使行包装”那样具有响应性，则不应使用 html 表格全部，而是使用flexbox或grid来实现它。

#table1 {
  width: 100%;
  text-align: center;
}

tbody tr.rowTr > td {
padding-bottom:1em;
}

<table id="table1">
  <tbody>
    <tr class="rowTr">
      <th class="category" colspan="5">categoryText</th>
    </tr>
    <tr class="rowTr">
      <td class="tabkeTd" id="tabkeTd11"> <a href="#"> td 1 </a>
      </td>
      <td class="tabkeTd" id="tabkeTd12"> <a href="#"> td 2 </a>
      </td>
      <td class="tabkeTd" id="tabkeTd13"> <a href="#"> td 3 </a>
      </td>
      <td class="tabkeTd" id="tabkeTd14"> <a href="#"> td 4 </a>
      </td>
      <td class="tabkeTd" id="tabkeTd15"> <a href="#"> td 5 </a>
      </td>
    </tr>
    <tr class="rowTr">
      <th class="category" colspan="5">categoryText</th>
    </tr>
    <tr class="rowTr">
      <td class="tabkeTd" id="tabkeTd11"> <a href="#"> td 1 </a>
      </td>
      <td class="tabkeTd" id="tabkeTd12"> <a href="#"> td 2 </a>
      </td>
      <td class="tabkeTd" id="tabkeTd13"> <a href="#"> td 3 </a>
      </td>
      <td class="tabkeTd" id="tabkeTd14"> <a href="#"> td 4 </a>
      </td>
      <td class="tabkeTd" id="tabkeTd15"> <a href="#"> td 5 </a>
      </td>
    </tr>
  </tbody>
</table>

下面是一个额外的代码结构，完全使用 flexbox 来达到预期的效果：

下面只是一个演示，您可以使用媒体查询并根据您的要求对其进行调整。

#table1 {
  width: 100%;
}

.tbody .tr > span:nth-child(n+1) {
  padding-bottom: 1em;
}

.tbody {
  width: 100%;
}

.tbody .tr {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-around;
  flex-direction: row;
  flex-flow: row wrap;
}

.tbody .row {
  text-align: center;
}

@media only screen and (max-width: 700px) {
  .tbody .tr .category {
    flex-basis: 100%;
    text-align: center;
  }
}

<div id="table1">
  <div class="tbody">
    <div class="tr">
      <span class="category">categoryText</span>
      <span class="tabkeTd" id="tabkeTd11"> <a href="#"> td 1 </a>
      </span>
      <span class="tabkeTd" id="tabkeTd12"> <a href="#"> td 2 </a>
      </span>
      <span class="tabkeTd" id="tabkeTd13"> <a href="#"> td 3 </a>
      </span>
      <span class="tabkeTd" id="tabkeTd14"> <a href="#"> td 4 </a>
      </span>
      <span class="tabkeTd" id="tabkeTd15"> <a href="#"> td 5 </a>
      </span>
    </div>
    <div class="tr">
      <span class="category">categoryText</span>
      <span class="tabkeTd" id="tabkeTd11"> <a href="#"> td 1 </a>
      </span>
      <span class="tabkeTd" id="tabkeTd12"> <a href="#"> td 2 </a>
      </span>
      <span class="tabkeTd" id="tabkeTd13"> <a href="#"> td 3 </a>
      </span>
      <span class="tabkeTd" id="tabkeTd14"> <a href="#"> td 4 </a>
      </span>
      <span class="tabkeTd" id="tabkeTd15"> <a href="#"> td 5 </a>
      </span>
    </div>
  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。