jquery - 使用 CSS 或 jQuery 的垂直样式表

Question

我有下表:

html:

<table>
    <tr>
        <td>water<br /><br /></td>
        <td>oil</td>
        <td>fire</td>
    </tr>
        <tr>
        <td>spec1<br /><br /></td>
        <td>spec2</td>
        <td>spec3</td>
    </tr>
</table>

CSS:

table th, td {
    background-color: #ccc;
    border: 1px solid #999;
    padding: 5px;
    vertical-align: top;
    width:10px;
}

我怎样才能使表格看起来像这样:(我只能使用 CSS 或 jQuery 来操作它)

water   spec1 
oil     spec2 
fire    spec3

http://jsfiddle.net/HAQ3s/30/

Answer 1

添加这个:

td {
 display: block;   
}

然后，在给每个 td 一个 id 之后:

​#t1:before {
    content:"water";
}​​​​​

之后，您可以“删除”具有负边距的 br :

#t2 {
   margin-top:-15px;   
}

最后一个技巧是添加间距以补偿不同长度的标签:在内容中使用 unicode\00A0。

#t2:before {
    content:"oil \00A0\00A0\00A0\00A0\00A0";
}

http://jsfiddle.net/dystroy/BNLgH/

编辑:如果您可以生成 html，只需执行此操作:

<table>
<tr><td align=right>water</td><td>0</td></tr>
...
</table>