具有垂直列文本的Bootstrap表样式

Question

我正在尝试在html / css / bootstrap3中重现静态图像，但是我很难使我的列正确。

这是我要追求的最终结果：

我会说这将是5列1行。第一列的宽度很小，带有垂直文本吗？

我已将所有列添加到表中，但是旋转第一列文本后，无法正确调整列宽的大小。

HTML：

<table class="table table-bordered tb">
<tbody>
  <tr>
    <th rowspan="3" class="titleColumn"><span class="positionTitle">Specialist (19)</span></th>
    <td class="dotted">Position 1 <br /> Position 2 <br /> Position 3</td>
    <td class="dotted">Position 4 <br /> Position 5 <br /> Position 6</td>
    <td class="dotted">Position 7 <br /> Position 8 <br /> Position 9</td>
  </tr>
</tbody>
</table>

CSS：

.dotted {
  border: dotted 3px #000000;
}

.table {
  border-collapse: collapse;
}

.positionTitle {
  /* Safari */
  -webkit-transform: rotate(-90deg);
  /* Firefox */
  -moz-transform: rotate(-90deg);
  /* IE */
  -ms-transform: rotate(-90deg);
  /* Opera */
  -o-transform: rotate(-90deg);
  float: left;
}

.titleColumn {
 background-color: red;
 color: white;
}

.tb{
  border-top: 10px solid red;
  border-bottom: 5px solid red;
  border-right: 5px solid red;
}

这是我在小提琴上所处的位置

http://jsfiddle.net/f1tack03/3/

1. 有没有比使用table更好的方法了？
2. 如何使第一列看起来像预期的最终结果？

Answer 1

您似乎需要调整<th>添加相对和绝对定位的位置。

.positionTitle {
  /* Safari */
  -webkit-transform: rotate(-90deg);
  /* Firefox */
  -moz-transform: rotate(-90deg);
  /* IE */
  -ms-transform: rotate(-90deg);
  /* Opera */
  -o-transform: rotate(-90deg);
transform: rotate(-90deg);
    position: absolute;
    left: 0;
    right: 0;
    bottom:0;
    white-space: nowrap;
}

.titleColumn {
 background-color: red;
 color: white;
 position: relative;
}