How to scroll a vertical text in table header?

Question

I have a simple table with vertical text in the header like:

FIDDLE

HTML & CSS

 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; }

 <div class="row" style="margin-top: 20px;margin-left: 10px;"> <div class="col-md-12"> <div class="table-responsive"> <table> <thead> <tr> <th class="vertical"> <div class="vertical">Really long and complex 1</div> </th> <th class="vertical"> <div class="vertical">Really long and complex 2</div> </th> <th class="vertical"> <div class="vertical">Really long and complex 3</div> </th> </tr> </thead> <tbody> <tr> <td>AH</td> <td>BH</td> <td>HH</td> </tr> </tbody> </table> </div> </div> </div>

And when I have lots of columns, the div wrapping the table scrolls and looks like this:

FIDDLE

But, as you might have noticed while scrolling the header is not scrolling at all. I found that I was using position: absolute in div.vertical 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:

FIDDLE

Is there any way we can we have both scrolling and small header width using CSS only? Thanks!

Answer 1

Add position: relative to th.vertical

fiddle

 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; position: relative; } td, th { padding: 5px; border-top: 1px solid #dddddd; border-left: 1px solid #dddddd; border-right: 1px solid #dddddd; }

 <div class="row" style="margin-top: 20px;margin-left: 10px;"> <div class="col-md-12"> <div class="table-responsive"> <table> <thead> <tr> <th class="vertical"> <div class="vertical">Really long and complex 1</div> </th> <th class="vertical"> <div class="vertical">Really long and complex 2</div> </th> <th class="vertical"> <div class="vertical">Really long and complex 3</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex 3</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex 3</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex 3</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex 3</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex 2</div> </th> </tr> </thead> <tbody> <tr> <td>AH</td> <td>BH</td> <td>HH</td> <td>AH</td> <td>BH</td> <td>HH</td> <td>AH</td> <td>BH</td> <td>HH</td> <td>AH</td> <td>BH</td> <td>HH</td> <td>AH</td> <td>BH</td> <td>HH</td> <td>AH</td> <td>BH</td> <td>HH</td> <td>AH</td> <td>BH</td> <td>HH</td> <td>AH</td> <td>BH</td> <td>HH</td> <td>AH</td> <td>BH</td> <td>HH</td> <td>AH</td> <td>BH</td> <td>HH</td> <td>AH</td> <td>BH</td> <td>HH</td> </tr> </tbody> </table> </div> </div> </div>

Answer 2

For infos : writing-mode

 .vertical { writing-mode:vertical-lr }

 <div class="row" style="margin-top: 20px;margin-left: 10px;"> <div class="col-md-12"> <div class="table-responsive"> <table> <thead> <tr> <th class="vertical"> <div class="vertical">Really long and complex 1</div> </th> <th class="vertical"> <div class="vertical">Really long and complex 2</div> </th> <th class="vertical"> <div class="vertical">Really long and complex 3</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex 3</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex 3</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex 3</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex 3</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex</div> </th> <th class="vertical"> <div class="vertical">Really long and complex 2</div> </th> </tr> </thead> <tbody> <tr> <td>AH</td> <td>BH</td> <td>HH</td> <td>AH</td> <td>BH</td> <td>HH</td> <td>AH</td> <td>BH</td> <td>HH</td> <td>AH</td> <td>BH</td> <td>HH</td> <td>AH</td> <td>BH</td> <td>HH</td> <td>AH</td> <td>BH</td> <td>HH</td> <td>AH</td> <td>BH</td> <td>HH</td> <td>AH</td> <td>BH</td> <td>HH</td> <td>AH</td> <td>BH</td> <td>HH</td> <td>AH</td> <td>BH</td> <td>HH</td> <td>AH</td> <td>BH</td> <td>HH</td> </tr> </tbody> </table> </div> </div>

similar answer : Rotating Text Within A Fixed Div