javascript - 具有垂直行的 HTML 表格

Question

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

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

Answer 1

如果你想要<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>