title: How to scroll a vertical text in table header?
body: <p>I have a simple table with vertical text in the header like:</p>
  
  <p><a href="https://jsfiddle.net/zgxn2w7w/" rel="nofollow noreferrer"><strong><code>FIDDLE</code></strong></a></p>
  
  <p><strong>HTML &amp; CSS</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div.vertical {
    margin-left: -100px;
    position: absolute;
    width: 215px;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
  }
  
  th.vertical {
    height: 220px;
    line-height: 14px;
    padding-bottom: 25px;
    text-align: left;
  }
  
  div.vertical {
    margin-left: -100px;
    position: absolute;
    width: 215px;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
  }
  
  th.vertical {
    height: 220px;
    line-height: 14px;
    padding-bottom: 25px;
    text-align: left;
  }
  
  td,
  th {
    padding: 5px;
    border-top: 1px solid #dddddd;
    border-left: 1px solid #dddddd;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row" style="margin-top: 20px;margin-left: 10px;"&gt;
    &lt;div class="col-md-12"&gt;
      &lt;div class="table-responsive"&gt;
        &lt;table&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th class="vertical"&gt;
                &lt;div class="vertical"&gt;Really long and complex 1&lt;/div&gt;
              &lt;/th&gt;
              &lt;th class="vertical"&gt;
                &lt;div class="vertical"&gt;Really long and complex 2&lt;/div&gt;
              &lt;/th&gt;
              &lt;th class="vertical"&gt;
                &lt;div class="vertical"&gt;Really long and complex 3&lt;/div&gt;
              &lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr&gt;
              &lt;td&gt;AH&lt;/td&gt;
              &lt;td&gt;BH&lt;/td&gt;
              &lt;td&gt;HH&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And when I have lots of columns, the div wrapping the table scrolls and looks like this:</p>
  
  <p><a href="https://jsfiddle.net/nfxm3p1v/" rel="nofollow noreferrer"><strong><code>FIDDLE</code></strong></a></p>
  
  <p>But, as you might have noticed while scrolling the header is not scrolling at all. I found that I was using <code>position: absolute</code> in <code>div.vertical</code> class, due to which this was happening. But, if I remove that style then the header is scrolling, but the header width becomes large as you can see here:</p>
  
  <p><a href="https://jsfiddle.net/nfxm3p1v/1/" rel="nofollow noreferrer"><strong><code>FIDDLE</code></strong></a></p>
  
  <p>Is there any way we can we have both scrolling and small header width using CSS only? 
  Thanks!</p>