palaѕн
Reputation: 73916
How to scroll a vertical text in table header?
I have a simple table with vertical text in the header like:
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:
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:
Is there any way we can we have both scrolling and small header width using CSS only? Thanks!
Upvotes: 2
Views: 104
Answers (2)
G-Cyrillus
Reputation: 105973
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
Upvotes: 0
sol
Reputation: 22949
Add position: relative to th.vertical
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>Upvotes: 2
Related Questions
- Horizontal Scroll Table in Bootstrap/CSS
- Make table header fixed when scrolling
- Make the bootstrap table scroll-able vertically and horizontally with fixed header
- Scrollable table vertical only
- Bootstrap Horizontal Scrollable Table
- Vertical scroll bar to one column of each row of the table
- Table header to be fixed using bootstrap and scrollable content
- HTML scrollable table header and body alignment
- Bootstrap table vertical scroll
- How to add horizontal scroll bar in bootstrap table?