html - HTML:如何:“用垂直线分隔表行”

我有一个包含表行的基本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);
  ;
}

预期结果：

最佳答案

这里有两件事要做：


将border-right应用于.textRotation，以得到不间断的垂直线。
仅在有数据的行中向th添加一点填充，以使文本不会被压缩到该行。


实际的数据行在第四个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