Vertical text on table to indicate grouped rows

Question

This is my code for my table. Everything is perfect but I want to add something I don't know how to do it and how to style it.

I want to group the rows by adding a title on the left like in the image. Any ideas on how to do this?

UPDATED CODE

<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;
}

This is what I want to achieve (a title every 5 rows): enter image description here

I believe this previous question should answer your own: http://stackoverflow.com/q/9830506/82548 (I'm not closing as dupe, yet, to give time for you to either clarify that it works, or explain why it doesn't). — David Thomas, Feb 25 '15 at 23:25
The problem is with styling this and making the text vertical like in the image. — Ricky, Feb 25 '15 at 23:26
If that previous question is coupled with this one: http://stackoverflow.com/questions/6028128/how-do-i-rotate-text-in-css is your question answered? — David Thomas, Feb 25 '15 at 23:28
I updated my code. I added a colspan but I don't know where to apply the rowspan. :/ My table is made row by row :/ Any ideas. Here is a live version: http://codepen.io/mariomez/pen/XJqwYy — Ricky, Feb 25 '15 at 23:55
I must be doing something wrong. I added the rowspan but the result is not right. Can you please help me? — Ricky, Feb 26 '15 at 00:10

score 3 · Accepted Answer · edited Jun 02 '19 at 09:03

You did it almost right, there were just needles cells left. But you need to adapt your CSS to handle the extra tds including the rowspan: Fiddle

HTML

.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%;
}

<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>

Vertical text on table to indicate grouped rows

1 Answers1