HTML：如何：“用垂直线分隔表格行”

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

试试这个。，

.textRotation {
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
        border-right: 3px solid;/*added one*/
      ;

Answer 2

这里有两件事要做：

1. 将border-right应用于.textRotation，为您提供完整的垂直线。
2. 仅在包含数据的行中向th添加一点填充，以便文本不会被压缩到该行。

实际数据行以＆＃34; Lun＆＃34;开头。在第4个tr并继续到表格的底部，因此您需要使用n+4的{​​{3}} 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;
}

:nth-child

Answer 3

JsFiddle

tr:nth-of-type(n+3) th
{
    border-left: 1px solid black;
}