表上的垂直文本表示分组的行

Question

这是我的表格的代码。一切都很完美，但我想添加一些我不知道该怎么做以及如何设计它的东西。

我想通过在左侧添加标题来对行进行分组，就像在图像中一样。关于如何做到这一点的任何想法？

更新代码

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="7" class="maintitle">title</td>
  </tr>
  <tr class="greenline">
    <td colspan="2">title</td>
    <td>title</td>
    <td>title</td>
    <td>title</td>
    <td>title</td>
    <td>title</td>
  </tr>

  <tr>
        <td rowspan="5">ff</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
    <tr>
    <td>2</td>
    <td>text</td>
    <td>third</td>
    <td>fourth</td>
    <td>first</td>
    <td>second</td>
  </tr>
    <tr>
    <td>3</td>
    <td>third</td>
    <td>text</td>
    <td>fourth</td>
    <td>first</td>
    <td>second</td>
  </tr>
    <tr>
    <td>4</td>
    <td>third</td>
    <td>fourth</td>
    <td>text</td>
    <td>first</td>
    <td>second</td>
  </tr>
    <tr>
    <td>5</td>
    <td>second</td>
    <td>third</td>
    <td>first</td>
    <td>text</td>
    <td>second</td>
  </tr>
    <tr>
        <td rowspan="5">ff</td>
    <td>text</td>
    <td>third</td>
    <td>fourth</td>
    <td>first</td>
    <td>second</td>
  </tr>
    <tr>
    <td>7</td>
    <td>second</td>
    <td>text</td>
    <td>third</td>
    <td>fourth</td>
    <td>second</td>
  </tr>
    <tr>
    <td>8</td>
    <td>second</td>
    <td>third</td>
    <td>text</td>
    <td>first</td>
    <td>second</td>
  </tr>
    <tr>
    <td>9</td>
    <td>second</td>
    <td>fourth</td>
    <td>text</td>
    <td>first</td>
    <td>second</td>
  </tr>
    <tr>
    <td>10</td>
    <td>second</td>
    <td>third</td>
    <td>text</td>
    <td>first</td>
    <td>second</td>
  </tr>
</table>

CSS：

.maintitle {
   background:#1b1e24;
  border-radius:5px 5px 0px 0px;
  height:40px;
  font-size:20px;
  color:#FFF;
  font-weight: 300;
  text-align:center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  vertical-align:middle;
}

.greenline {
  color:#D5DDE5;;
  background:green;
  border-bottom:4px solid #9ea7af;
  font-size:14px;
  font-weight: 300;
  text-align:center;
  vertical-align:middle;
}

table tr:not(:nth-child(-n+2)) > td:first-child {
  font-weight: bold;
  text-align:center;
}

这就是我想要实现的目标（每5行标题）：

Answer 1

你做得差不多，只剩下针细胞了。但是你需要调整你的CSS以处理额外的tds，包括rowspan：Fiddle

<强> HTML

 <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="7" class="maintitle">title</td>
  </tr>
  <tr class="greenline">
    <td>&nbsp;</td>
    <td>title</td>
    <td>title</td>
    <td>title</td>
    <td>title</td>
    <td>title</td>
    <td>title</td>
  </tr>
  <tr>
    <td rowspan="5">***title***</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td>2</td>
    <td>second</td>
    <td>third</td>
    <td>fourth</td>
    <td>first</td>
    <td>second</td>
  </tr>
  <tr>
    <td>3</td>
    <td>second</td>
    <td>third</td>
    <td>fourth</td>
    <td>first</td>
    <td>second</td>
  </tr>
  <tr>
    <td>4</td>
    <td>second</td>
    <td>third</td>
    <td>fourth</td>
    <td>first</td>
    <td>second</td>
  </tr>
  <tr>
    <td>5</td>
    <td>second</td>
    <td>third</td>
    <td>fourth</td>
    <td>first</td>
    <td>second</td>
  </tr>
  <tr>
    <td rowspan="5">***title***</td>
    <td>6</td>
    <td>second</td>
    <td>third</td>
    <td>fourth</td>
    <td>first</td>
    <td>second</td>
  </tr>
  <tr>
    <td>7</td>
    <td>second</td>
    <td>third</td>
    <td>fourth</td>
    <td>first</td>
    <td>second</td>
  </tr>
  <tr>
    <td>8</td>
    <td>second</td>
    <td>third</td>
    <td>fourth</td>
    <td>first</td>
    <td>second</td>
  </tr>
  <tr>
    <td>9</td>
    <td>second</td>
    <td>third</td>
    <td>fourth</td>
    <td>first</td>
    <td>second</td>
  </tr>
  <tr>
    <td>10</td>
    <td>second</td>
    <td>third</td>
    <td>fourth</td>
    <td>first</td>
    <td>second</td>
  </tr>
</table>

<强> CSS

.maintitle {
   background:#1b1e24;
  border-radius:5px 5px 0px 0px;
  height:40px;
  font-size:20px;
  color:#FFF;
  font-weight: 300;
  text-align:center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  vertical-align:middle;
}

.greenline {
  color:#D5DDE5;;
  background:green;
  border-bottom:4px solid #9ea7af;
  font-size:14px;
  font-weight: 300;
  text-align:center;
  vertical-align:middle;
}

table tr:not(:nth-child(-n+2)) > td:first-child,
table td[rowspan] + td{
  font-weight: bold;
  text-align:center;
}

table td[rowspan] {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    width: 1%;
}