如果表格单元格在同一表格行中，如何将表格标题放在表格单元格上方？答案

【问题标题】：How do I put the table headers above the table cells if they are in the same table row?如果表格单元格在同一表格行中，如何将表格标题放在表格单元格上方？
【发布时间】：2023-03-24 11:24:02
【问题描述】：

我有一张这样的桌子：

<table>
  <tr>
    <th>Header</th>
    <td>Content</td>
  </tr>
  <tr>
    <th>Header</th>
    <td>Content</td>
  </tr>
</table>

如何使标题实际浮动在内容单元格上方而不将所有内容放在单独的行上？例如：

标题内容标题内容

【问题讨论】：

你为什么要制作一张桌子而不是一张桌子？

标签： html css xhtml html-table

【解决方案1】：

您没有提供很多信息，但根据语义，您最好使用定义列表而不是损坏的表：

<dl>
    <dt>Header</dt>
    <dd>Content</dd>

    <dt>Header</dt>
    <dd>Content</dd>
</dl>

这将为您提供如下所示的输出：

Header
   Content

Header
   Content

然后通过 css 设置样式很简单，因为标题是 dt 的，内容是 dd 的：

dt { font-weight: bold; font-size: 200%; }
dd { color: #999; }

另见：

【讨论】：

【解决方案2】：

在你的 CSS 中试试这个：

td,th{display:block;}

【讨论】：