2010-06-03 106 views
0

我有这样一个表:如何将表格标题放在表格单元格上方,如果它们在同一个表格行中?

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

我怎样才能让真正浮动的内容单元上方的头部没有把一切都在一个单独的行?例如:

 
Header 
Content 

Header 
Content 
+0

为什么不使用
? – alejandrobog 2010-06-03 20:22:17

+6

你为什么要制作一张桌子不是桌子? – Shaded 2010-06-03 20:23:40

回答

2

试试这个在你的CSS:

td,th{display:block;}

+0

这只适用于你只有一列的人... – 2010-06-03 21:26:07

4

你不给大量的信息,但你可能会使用一个定义列表,而不是错位会更好表,根据语义:

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

参见: