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

试试这个小提琴更新。它在FF中正确测试。其他浏览器没试过。

我将下面的块和内联块语句添加到您的原始样式中。

CSS：

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

您可以在样式定义中使用负边距table tr来调整间距以适应口味。

Answer 2

添加这个：

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>