带有垂直行的 HTML 表格

2023-12-01

如何在 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

带有垂直行的 HTML 表格 的相关文章