HTML:如何: “Separate table rows with a vertical line”

Question

我有一个包含表格行的基本 HTML 表格。我的目标是用可见的垂直线分隔这些表格行(为了更好地阅读内容)。

我该怎么做？谢谢。

JSFIDDLE

.line {
    border-bottom:1px solid black;
}

.textRotation {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
  ;
}

预期结果:

Answer 1

这里有两件事要做:

1. 将 border-right 应用于 .textRotation 以获得完整的垂直线。
2. 仅在包含数据的行中的 th 处添加一点填充，这样文本就不会被挤压到该行。

实际数据行在第 4 个 tr 中以“Lun”开始，一直到表的底部，因此您需要使用 :nth-child n+4 的 CSS 选择器并对其应用 padding-left。

.textRotation {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    border-right: 2px solid black;
}

tr:nth-of-type(n+4) th
{
    padding-left:3px;
}

Updated Fiddle