CODEWITHSUNDEEP
htmlcss
Josh Doug
Josh Doug

Reputation: 444

Vertical Table Headings with HTML and CSS

I'm trying to create a table with headings that are vertical and without explicit sizing for height, is this currently possible with just HTML and CSS?

I'm avoiding using any JS as this HTML is being templated using Thymleaf & Spring. I'm avoiding explicit sizing for height as this will style multiple tables with different headings, so they will have different heights - otherwise there'll be wasted space above them or they'll be partially cut off.

Link to my codepen with a simple example of what I'm trying to achieve. I'd like the second heading to not overlap the rows below and for the whole heading to expand in height to accomdate it.

Code that can be found at the codepen link above:

<table>
  <thead>
    <tr>
      <th>First Heading</th>
      <th class="vertical">Second Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Typical cell</td>
      <td>Typical cell</td>
    </tr>
    <tr>
      <td>Typical Cell cell</td>
      <td>Typical Cell</td>
    </tr>
  </tbody>
</table>

.vertical {
  transform: rotate(-90deg);
}

Edit: this has been marked as duplicate, but the question linked doesn't mention the height being an issue, and the answer includes a CSS property which is actually now deprecated. So I think this question is different enough that it shouldn't be considered a duplicate.

Upvotes: 6

Views: 13089

Answers (4)

MattPo
MattPo

Reputation: 46

Josh Doug's answer is great with one problem. Most vertical table headers have the text aligned on the bottom (which is what I think ashleedawg's comment was referencing). This may not be a problem if all your heading text is the same length, but if you have some longer and some shorter, it becomes hard to read. Easy enhancement. First use Josh's transform on the div:

thead tr th div, .vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

Then add this style to the th:

thead tr th {
    vertical-align: bottom;
}

The result is a table with the headers formatted more like they would be in Excel if you rotate the headers.

Upvotes: 2

Josh Doug
Josh Doug

Reputation: 444

Using a combination of my original solution and @pasan_jg's answer I've found the solution I was looking for!

The issue: text-orientation and writing-mode don't appear to support vertical orientated text that is read bottom to top and breaks left to right (at least my solution does this in Chrome, the line doesn't break in Firefox), i.e. they don't support rotating the text by 270deg.

The other solution is using a transform to rotate the text by 270deg, but this doesn't update the box sizing so it overlaps/get cutoff unless you manually set the height and width, which is no good if you're using the same style for multiple tables which may contain different length headings.

The solution: first nest the heading text you want to style vertically into a div within the th and vertically align the text using writing-mode like so:

thead tr th div, .vertical {
    writing-mode: vertical-rl;
}

This will resize the box, now we can flip this text 180 degrees with a transform but the box is already sized for it so we don't need to manually set the height or width, finished css:

thead tr th div, .vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

Codepen solution: link.

Edit: removed text-orientation: sideways as it doesn't appear to be necessary.

Upvotes: 11

pasanjg
pasanjg

Reputation: 646

Is this what you are looking for?

.vertical {
  writing-mode: vertical-rl;
  text-orientation: sideways-right;
}
<table>
  <thead>
    <tr>
      <th>
        <div class="vertical">First Heading</div>
      </th>
      <th>
        <div class="vertical">Second Heading</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Typical cell</td>
      <td>Typical cell</td>
    </tr>
    <tr>
      <td>Typical Cell cell</td>
      <td>Typical Cell</td>
    </tr>
  </tbody>
</table>

Learn more about text-orientation

Upvotes: 2

vishulg
vishulg

Reputation: 149

Change the CSS of your vertical class as mention below:

.vertical {
     writing-mode: vertical-lr;
     text-orientation: upright;
     display: block;
}

This will help you, if you have any other issue please feel free to contact me in comments. Thanks

Upvotes: 0

Related Questions