使用 CSS 或 jQuery 垂直样式表答案

【问题标题】：Vertically style table using CSS or jQuery使用 CSS 或 jQuery 垂直样式表
【发布时间】：2018-10-19 19:02:48
【问题描述】：

我有下表：

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/

【问题讨论】：

whathaveyourtried.com?
Ihavetriedthis.com！ - jsfiddle.net/HAQ3s/33 我基本上接受了其他人的建议，在 td 中显示块，然后添加了一些 jquery 以向第二个 tr 块添加一个类，然后我可以用 CSS 定位它，但它不起作用。
你想支持哪些浏览器？
所有浏览器，你知道如何在我的代码中向第二个 tr 添加一个类吗？

标签： jquery css html-table

【解决方案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>

【讨论】：

好的...所以你仍然可以使用我的建议，但你为什么不简单地生成一个包含 3 行的表格？

【解决方案2】：

试试这个fiddle update。它在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 样式定义中使用负边距来调整间距以适应口味。

【讨论】：