gpt4 book ai didi

javascript - 具有垂直行的 HTML 表格

转载 作者:技术小花猫 更新时间:2023-10-29 12:16:16 28 4
gpt4 key购买 nike

如何在 HTML 中制作垂直表格?垂直,我的意思是行将是垂直的,表格标题位于左侧。

enter image description here

我也需要它,这样我就可以像在普通表中一样访问这些行(在本例中是垂直的),使用 <tr> .这是因为我动态获取一行数据(如 A 行)并将其插入表中。我正在使用 angularJS 来避免 DOM 操作,所以我不是在寻找使用 Javascript 的复杂 DOM 操作。

最佳答案

如果你想要<tr>要显示列而不是行,试试这个简单的 CSS

tr { display: block; float: left; }
th, td { display: block; }

只要您使用单行单元格(表格行为已删除),这应该会显示您想要的内容。

/* single-row column design */
tr { display: block; float: left; }
th, td { display: block; border: 1px solid black; }

/* border-collapse */
tr>*:not(:first-child) { border-top: 0; }
tr:not(:first-child)>* { border-left:0; }
<table>
<tr>
<th>name</th>
<th>number</th>
</tr>
<tr>
<td>James Bond</td>
<td>007</td>
</tr>
<tr>
<td>Lucipher</td>
<td>666</td>
</tr>
</table>

关于javascript - 具有垂直行的 HTML 表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16918094/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com