Creating vertical column in html table

In this tutorial I will show you that how can we create vertical column in HTML table.
Bellow is HTML for it:

<table>
   <tbody>
      <tr>
         <td rowspan="4"><div class="verticalText">one</div></td>
         <td>One</td>
         <td>Other</td>
      </tr>
      <tr>
         <td>One</td>
         <td>Other</td>
      </tr>
      <tr>
         <td>One</td>
         <td>Other</td>
      </tr>
      <tr>
         <td>One</td>
         <td>Other</td>
      </tr>
   </tbody>
</table>

& bellow is css code for it:

.verticalText {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg); 
}

Click here to see demo of This

Bellow is live example:

admin

  • http://www.yassershaikh.com Yasser

    Nicely done !