How to create a vertical column in a table using css

Question

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

enter image description here

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

Merge cell with rowspan attribute. Vertical text: http://stackoverflow.com/questions/3225572/vertical-text-in-ie-within-a-table-cell — nhahtdh, Dec 03 '12 at 09:45
Read about Table "Row span" and "column span", it might help you. — Shahzeb Khan, Dec 03 '12 at 09:48

score 5 · Accepted Answer · edited Aug 19 '15 at 01:34

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.

The text in the verticalText should be wrapped in a span, and define the CSS for the span inside (with `display:block`). Otherwise, with the current code, there might be weird effect since the whole cell is rotated (not just the text). — nhahtdh, Dec 03 '12 at 09:55
I have tried this one but vertical column never fits the size of other columns — vaibhav shah, Dec 03 '12 at 09:57
What do you mean by size? The height of the first td should be fine, maybe you have to adjust the text-align and vertical-align properties — LittleSweetSeas, Dec 03 '12 at 10:19
In image you can see that height of first column is equal to sum of heights of four column of 2nd column. But if i do using above code then height of 1st column is much bigger than other column — vaibhav shah, Dec 03 '12 at 10:33

score 2 · Answer 2 · answered Dec 03 '12 at 10:37

2

Use rowspan check the DEMO HERE

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

answered Dec 03 '12 at 10:37

Sowmya

26,684
21
96
136

How to create a vertical column in a table using css

2 Answers2