How to create a vertical column in a table using css

Question

I want to create an html table in the format below.

I am not able to find a way to do it. Can anyone help me?

Answer 1

I don't think you could have a fully cross-browser solution, anyway try this:

 .verticalText { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3); } 

 <table border="1"> <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> 

In the HTML part, you use the attribute "rowspan" to tell the cell (td) to span over n rows; you have to remove the relative cell declaration in the subsequent "spanned" cell. The same works horizontally with the attribute "colspan". Default value of such attributes is 1, and it's implicit.

The CSS part try to render the text vertically as seen in your image, but it's not a CSS standard yet, so you have to try it in various browser. If you can't achieve fully compatibility, you might be forced to render that text by image, if text is not dynamic.

Edited HTML to include a container to text as indicated in comment.

Answer 2

Use rowspan check the DEMO HERE

You need to change the rowspan number when you add the new row.