title: Vertical Table Headings with HTML and CSS
body: <p>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?</p>
  
  <p>I'm avoiding using any JS as this HTML is being templated using Thymleaf &amp; 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.</p>
  
  <p><a href="https://codepen.io/JDS/pen/dabrGj" rel="nofollow noreferrer">Link</a> 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.</p>
  
  <p>Code that can be found at the codepen link above:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;First Heading&lt;/th&gt;
        &lt;th class="vertical"&gt;Second Heading&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;Typical cell&lt;/td&gt;
        &lt;td&gt;Typical cell&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Typical Cell cell&lt;/td&gt;
        &lt;td&gt;Typical Cell&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.vertical {
    transform: rotate(-90deg);
  }
  </code></pre>
  
  <p>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.</p>