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

Question

我有一张这样的表：

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

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

Header
Content

Header
Content

Answer 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; }

另见：

• http://www.maxdesign.com.au/articles/definition/
• http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_dd_test
• http://www.w3schools.com/tags/tag_dl.asp

Answer 2

在你的css中试试这个：

td,th{display:block;}