<td> 和 <th> 中带有 flexbox 的 HTML 表格和 div 意外行为答案

【问题标题】：HTML Table and divs with flexbox in <td> and <th> unexpected behavior<td> 和 <th> 中带有 flexbox 的 HTML 表格和 div 意外行为
【发布时间】：2021-07-19 06:28:08
【问题描述】：

目标：我尝试使用 HTML 表格创建一个表格，该表格具有可滚动的 tbody 和固定的第一列。给定 col 中的每个单元格都应具有相同的宽度，并且任何行的高度都应刚好足以容纳内容，这就是 HTML 表格的作用。

我尝试过的：发现这特别难以实现，我尝试实现一个带有粘性标题和第一个列的 HTML 表格，如此处所述。https://codepen.io /paulobrien/pen/LBrMxa?editors=1100 但是，我注意到 HTML 表格给我带来了问题。我已经放置了使用 flexbox 将其中的 flex-items 对齐到 td 的 div，并且表格间距不再按设计工作。

我已经读到这是因为 HTML 表格不应该在 td 和 th 中包含具有复杂样式的 div。

问题： HTML Table 是否可以处理具有 flexbox 对齐的 div 并且仍按预期呈现？

未来的想法：我正在考虑使用 CSS Grid 构建一个表格，因为我听说它可以容纳的项目更加灵活。

【问题讨论】：

这不是预期的吗？随着单元格内容的增加，行适合（适应）。
@RokoC.Buljan 谢谢。为了更清楚，我更新了我的问题。

标签： html css html-table css-grid

【解决方案1】：

<table>
   <colgroup>
      <col width="50%">
      <col width="50%">
   </colgroup>

   <tr>
      <th>Id</th>
      <th>Title</th>
  </tr>
  <tr>
      <td>3476896</td>
      <td>My first HTML</td>
  </tr>
</table>

您可以使用 colgroup 标记并将 col 标记放入其中，并为每列提供特定属性。我把 width 属性放在那里。

【讨论】：