Rotate Table cell with color

by amrangry

HTML

<h2>V Cell</h2>



<table border="1">
  <tbody>
  <tr>
      <th class='rotate' colspan="1" rowspan="2" style="background-color:lightgreen;color:black"><div>First<div></th>
      <th>Second</th>
      <th>Third</th>
    </tr>
    <tr>
      <td>foo1</td><td>foo2</td>
    </tr>
    <tr>
      <td>foo3</td><td>foo4</td><td>foo5</td>
    </tr>
    <tr>
      <td>foo6</td><td>foo7</td><td>foo8</td>
    </tr>
  </tbody>
</table>

CSS

.rotate > div {
    text-align: center;
    white-space:nowrap;
    g-origin:50% 50%;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg;
    -ms-transform: rotate(-90deg;
    -o-transform: rotate(-90deg;
    transform: rotate(-90deg);
}

table {
    text-align:center;
}