垂直 HTML 表格

创建具有垂直行的 HTML 表格提供了一种独特的方式来显示数据，行标题位于左侧而不是顶部。要实现此目的，可以应用 CSS 样式来转换表格的结构。

CSS 样式

要将表格行呈现为垂直列，请遵循以下 CSS 规则可以使用：

tr {
  display: block;
  float: left;
}

th, td {
  display: block;
}

这将导致表格单元格垂直流动，相应的标题出现在每行的左侧。

AngularJS Integration

维护对表行（现在显示为列）的访问可以通过合并以下 CSS 规则来实现：

/* border-collapse */
tr>*:not(:first-child) {
  border-top: 0;
}

tr:not(:first-child)>* {
  border-left: 0;
}

这些规则确保表格单元格之间的边框仅在边缘呈现，从而在行之间提供清晰的区分。通过将这些技术与 AngularJS 结合使用，您可以动态操作表格数据，同时保留垂直方向。