CODEWITHSUNDEEP
htmlcss
vaibhav shah
vaibhav shah

Reputation: 5069

How to create a vertical column in a table using css

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?

Upvotes: 2

Views: 5426

Answers (2)

LittleSweetSeas
LittleSweetSeas

Reputation: 7054

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.

Upvotes: 5

Sowmya
Sowmya

Reputation: 26969

Use rowspan check the DEMO HERE

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

Upvotes: 2

Related Questions