Rotating table header text with CSS transforms
‘transform’ alters the orientation of the entire element you declare it on, not the text content inside it. It's more like IE's ‘matrix’ property than ‘writing-mode’.
Crucially, transforming an element doesn't change how its content size is calculated (or how its parent's layout is affected by that size). CSS's algorithms for vertical and horizontal sizing are different and difficult enough to get right to being with; there's no real consistent way they could accomodate content with arbitrary rotation. So ‘transform’ is like using ‘position: relative’: it changes where the content is rendered, but not anything to do with layout size.
So if you want to include one in a table you'll need to set the cell's ‘height’ explicitly to accomodate the expected rotated ‘width’. If you don't know that in advance you could potentially hack it up with JavaScript, perhaps.
FWIW: for me on Fx3.1b3 the span is also rotated like the others. However on Windows with its horizontal-only anti-aliasing (ClearType) the rendering doesn't look great... a well-rendered image could come out considerably better.
Rotate table header
Ah. The trick here is to put the header text in a <span> nested in a <div> (see this article):
th.rotated-text { height: 140px; white-space: nowrap; padding: 0 !important;}
th.rotated-text > div { transform: translate(13px, 0px) rotate(310deg); width: 30px;}
th.rotated-text > div > span { padding: 5px 10px;}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <div class="row mt-4"> <div class="col-md-3"></div> <div class="col-xs-12 col-md-6"> <table class="table table-hover"> <thead class="membership-tiers text-left"> <tr> <th scope="col"></th> <th class="rotated-text" scope="col"><div><span>View page 1</span></div></th> <th class="rotated-text" scope="col"><div><span>View page 2</span></div></th> <th class="rotated-text" scope="col"><div><span>Contact James</span></div></th> <th class="rotated-text" scope="col"><div><span>Contact Alan</span></div></th> <th class="rotated-text" scope="col"><div><span>View James' profile</span></div></th> <th class="rotated-text" scope="col"><div><span>View Alan's data</span></div></th> <th class="rotated-text" scope="col"><div><span>Edit page 1</span></div></th> <th class="rotated-text" scope="col"><div><span>Edit page 2</span></div></th> <th class="rotated-text" scope="col"><div><span>Delete page 1</span></div></th> </tr> </thead> <tbody> <tr> <th scope="row">James</th> <td>V</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>X</td> <td>V</td> <td>X</td> </tr> <tr> <th scope="row">Alan</th> <td>V</td> <td>V</td> <td>X</td> <td>X</td> <td>V</td> <td>X</td> <td>V</td> <td>V</td> <td>X</td> </tr> <tr> <th scope="row">Emma</th> <td>V</td> <td>V</td> <td>V</td> <td>V</td> <td>V</td> <td>V</td> <td>V</td> <td>V</td> <td>V</td> </tr> </tbody> </table> </div> <div class="col-md-3"></div> </div>How to display vertical text in table headers with auto height / without text overflow?
If you use a pseudo element and vertical-padding, you may basicly draw a square box or <td> :
http://jsfiddle.net/qjzwG/319/
.verticalTableHeader {
text-align:center;
white-space:nowrap;
transform-origin:50% 50%;
transform: rotate(90deg);
}
.verticalTableHeader:before {
content:'';
padding-top:110%;/* takes width as reference, + 10% for faking some extra padding */
display:inline-block;
vertical-align:middle;
}
If you want to keep <td> ith a small width, table-layout:fixed + width might help.
http://jsfiddle.net/qjzwG/320/
.verticalTableHeader {
text-align:center;
white-space:nowrap;
transform: rotate(90deg);
}
.verticalTableHeader p {
margin:0 -100% ;
display:inline-block;
}
.verticalTableHeader p:before{
content:'';
width:0;
padding-top:110%;/* takes width as reference, + 10% for faking some extra padding */
display:inline-block;
vertical-align:middle;
}
table {
text-align:center;
table-layout : fixed;
width:150px
}
If you want table to still be able to grow from it's content but not from width of <th> , using a wrapper with a hudge negative margin opposite to dir/direction of document might do : apparently, the closest to your needs, http://jsfiddle.net/qjzwG/320/
<table border="1">
<tr>
<th class="verticalTableHeader"><p>First</p></th>
<th class="verticalTableHeader"><p>Second-long-header</p></th>
<th class="verticalTableHeader"><p>Third</p></th>
</tr>
.verticalTableHeader {
text-align:center;
white-space:nowrap;
transform: rotate(90deg);
}
.verticalTableHeader p {
margin:0 -999px;/* virtually reduce space needed on width to very little */
display:inline-block;
}
.verticalTableHeader p:before {
content:'';
width:0;
padding-top:110%;
/* takes width as reference, + 10% for faking some extra padding */
display:inline-block;
vertical-align:middle;
}
table {
text-align:center;
}
HTML from demo and base :
<table border="1">
<tr>
<th class="verticalTableHeader">First</th>
<th class="verticalTableHeader">Second</th>
<th class="verticalTableHeader">Third</th>
</tr>
<tr>
<td>foo</td>
<td>foo</td>
<td>foo</td>
</tr>
<tr>
<td>foo</td>
<td>foo</td>
<td>foo</td>
</tr>
<tr>
<td>foo</td>
<td>foo</td>
<td>foo</td>
</tr>
</table>
For older IE , you need to use writing-mode (CSS) :http://msdn.microsoft.com/en-us/library/ie/ms531187%28v=vs.85%29.aspx
How can I properly rotate a text inside a table cell
You can use writing-mode: vertical-rl; combined with a scale transformation:
table { text-align: left; border-collapse: collapse;}
td,th { border: 1px solid lightgrey; padding: 0px 3px;}
td:not(:first-child) { min-width: 140px;}
.table_title_top { text-align: center;}
.table_title_left { text-align: center; width: 35px;}
.table_title_left div { writing-mode: vertical-rl; white-space:nowrap; transform:scale(-1);}<!DOCTYPE html><html lang="en" dir="ltr">
<head> <meta charset="utf-8"></head>
<body> <table> <tbody> <tr> <td></td> <td colspan="100" class="table_title_top"> <div>Title Top Title Top</div> </td> </tr> <tr class="calc-tr calc-tr-title"> <td rowspan="100" class="table_title_left"> <div>Title Left Title Left</div> </td> <td>0</td> <td>0</td> <td>0</td> </tr> <tr> <td>0</td> <td>0</td> <td>0</td> </tr> <tr> <td>0</td> <td>0</td> <td>0</td> </tr> </tbody> </table></body>
</html>HTML Table with vertically rotated headers on the left side
I was able to solve this b treating each tag as it's own row and building the data on them individually.
<table>
<tr>
<td rowspan="4" class="rotate">Header Text</td>
<td class="rotate pole">SubHeader Text 1</td>
<td>
<ul>
<li>text text text text text text text text</li>
<li>text text text text text text text text</li>
<li>text text text text text text text text</li>
<li>text text text text text text text text</li>
</ul>
</td>
<td>
<ul class="no-ul-style">
<li>6</li>
<li>6</li>
<li>6</li>
<li>6</li>
</ul>
</td>
<td>
6
</td>
</tr>
<tr>
<td class="rotate pole">SubHeader Text 2</td>
<td>
<ul>
<li>text text text text text text text text</li>
<li>text text text text text text text text</li>
<li>text text text text text text text text</li>
<li>text text text text text text text text</li>
</ul>
</td>
<td>
<ul class="no-ul-style">
<li>6</li>
<li>6</li>
<li>6</li>
<li>6</li>
</ul>
</td>
<td>
6
</td>
</tr>
<tr>
<td class="rotate pole">SubHeader Text 3</td>
<td>
<ul>
<li>text text text text text text text text</li>
<li>text text text text text text text text</li>
<li>text text text text text text text text</li>
<li>text text text text text text text text</li>
</ul>
</td>
<td>
<ul class="no-ul-style">
<li>6</li>
<li>6</li>
<li>6</li>
<li>6</li>
</ul>
</td>
<td>
6
</td>
</tr>
<tr>
<td class="rotate pole">SubHeader Text 4</td>
<td>
<ul>
<li>text text text text text text text text</li>
<li>text text text text text text text text</li>
<li>text text text text text text text text</li>
<li>text text text text text text text text</li>
</ul>
</td>
<td>
<ul class="no-ul-style">
<li>6</li>
<li>6</li>
<li>6</li>
<li>6</li>
</ul>
</td>
<td>
6
</td>
</tr>
</table>
How could I rotate table header cells and automatically adjust to content size?
When you want to change the write direction of the text, you can use writing-mode. In this case I use writing-mode: vertical-lr;, which makes the text vertical, and the container height will change to fit the text. We also need to rotate the text in place, but in the future I would use sideways-lr, which lacks support now.
th {
background-color: #ccc;
}
th,
td {
border: 1px solid #000;
}
.rotate span {
writing-mode: vertical-rl;
transform: rotate(180deg);
}<table cellspacing="0" cellpadding="0">
<thead>
<tr>
<th class="rotate">
<span>Foo</span>
</th>
<th class="rotate">
<span>Foo Bar Bazz</span>
</th>
<th class="rotate">
<span>FooBar</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Foo collection
</td>
<td>
Foo Bar Bazz collection
</td>
<td>
Foo Bar collection
</td>
</tr>
</tbody>
</table>90 degree text rotation in a table
We can do some CSS tricks by warping headers text inside DIV's and applying some rules on th and the DIV's inside it, then we can get more styling ability then we can shorten the width of header even if text is long.
Some thing like: I hope it helps for you, Thanks
th, td, table{
border:solid 1px;
}
div.vertical{
position: absolute;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg); /* Safari/Chrome */
-moz-transform: rotate(-90deg); /* Firefox */
-o-transform: rotate(-90deg); /* Opera */
-ms-transform: rotate(-90deg); /* IE 9 */
}
th.vertical{
max-width: 50px;
height: 85px;
line-height: 14px;
padding-bottom: 20px;
text-align: inherit;
}<table>
<tr>
<th colspan="3" class="text-center risk-th" style="width: 20%">Controls</th>
<th class="risk-th" style="width: 4%">
<!--Manuality-->
</th>
<th class="risk-th" style="width: 4%">
<!--Probability-->
</th>
<th class="risk-th" style="width: 4%">
<!--Gravity-->
</th>
<th class="risk-th" style="width: 4%">
<!--Mitigation-->
</th>
<th class="vertical"><div class="vertical">Manuality</div></th>
<th class="vertical"><div class="vertical">Probability</div></th>
<th class="vertical"><div class="vertical">Gravity</div></th>
<th class="vertical"><div class="vertical">Mitigation</div></th>
</tr>
</table>Transform rotate the table header in HTML and CSS
Try to do this..
According our project requirements,flexibility is necessary.This inline CSS support for email template also.
<!doctype html>
<head>
<style type="text/css">
td{
border:1px solid;
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" style="width: 1000px; margin: 0px auto; border-spacing: 0px ! important;">
<tbody>
</tbody>
<thead>
<tr>
<td style="width: 20%;text-align: center;">No</td>
<td style="width: 40%;text-align: center;">1</td>
<td style="width: 40%;text-align: center;">2</td>
</tr>
</thead>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 0px; border-spacing: 0px; transform: rotate(0deg);">
<tbody style="width: 100%; border-spacing: 0px; border-collapse: initial;">
<tr style="width: 100%;">
<td style="text-align: center; width: 30%; height: 190px;">
<div style="transform: rotate(-85deg);" class="rotate">
<p> 1</p>
</div>
</td>
<td style="width: 30%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p>2</p>
</div>
</td>
<td style="width: 30%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p>3</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 0px; border-spacing: 0px; transform: rotate(0deg);">
<tbody style="width: 100%; border-spacing: 0px; border-collapse: initial;">
<tr style="width: 100%;">
<td style="text-align: center; width: 14%; height: 190px;">
<div style="transform: rotate(-85deg);" class="rotate">
<p> 1</p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p>2</p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p>3</p>
</div>
</td>
<td style="text-align: center; width: 14%; height: 190px;">
<div style="transform: rotate(-85deg);" class="rotate">
<p> 4</p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p>5</p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p>6</p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p>7</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 0px; border-spacing: 0px; transform: rotate(0deg);">
<tbody style="width: 100%; border-spacing: 0px; border-collapse: initial;">
<tr style="width: 100%;">
<td style="text-align: center; width: 14%; height: 190px;">
<div style="transform: rotate(-85deg);" class="rotate">
<p> 1</p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p>2</p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p>3</p>
</div>
</td>
<td style="text-align: center; width: 14%; height: 190px;">
<div style="transform: rotate(-85deg);" class="rotate">
<p> 4</p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p>5</p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p>6</p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p>7</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 0px; border-spacing: 0px; transform: rotate(0deg);">
<tbody style="width: 100%; border-spacing: 0px; border-collapse: initial;">
<tr style="width: 100%;">
<td style="text-align: center; width: 30%; height: 30px;">
<div style="transform: rotate(-85deg);" class="rotate">
<p> </p>
</div>
</td>
<td style="width: 30%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p></p>
</div>
</td>
<td style="width: 30%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p></p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 0px; border-spacing: 0px; transform: rotate(0deg);">
<tbody style="width: 100%; border-spacing: 0px; border-collapse: initial;">
<tr style="width: 100%;">
<td style="text-align: center; width: 14%; height: 30px;">
<div style="transform: rotate(-85deg);" class="rotate">
<p> </p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p></p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p></p>
</div>
</td>
<td style="text-align: center; width: 14%; height: 30px;">
<div style="transform: rotate(-85deg);" class="rotate">
<p> </p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p></p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p></p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p></p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 0px; border-spacing: 0px; transform: rotate(0deg);">
<tbody style="width: 100%; border-spacing: 0px; border-collapse: initial;">
<tr style="width: 100%;">
<td style="text-align: center; width: 14%; height: 30px;">
<div style="transform: rotate(-85deg);" class="rotate">
<p> </p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p></p>
</div>
</td>
<td style="width: 14%; text-align: center;">
<div style="transform: rotate(-85deg);" class="rotate">
<p></p>
</div>
</td>
<td style="text-align: center; width: 14%; height: 30px;">
<div style="transform: rotate(-85deg);" class="rotate">
<p></p></div>
Related Topics
How to Style Disabled Textarea in IE8
CSS Different Font Sizes on Different Families
What Is the Most Practical Way to Check for "@Supports" Support Using Only CSS
<A> with an Inner <Span> Not Triggering :Active State in Ie 8
Flexbox VS Tables, Why Do We Need Flexbox
Are All CSS Font-Weight Property's Values Useful
100% Width Bg Images Not Extending on Horizontal Scroll
Is a CSS Property Starting with a Hash (#) Valid
Sass and Rounding Down Numbers. Can This Be Configured
Purpose of *:Before, *:After Rule Without Content Property
Is There a Functional Difference Between > *:First-Child and > :First-Child
How to Hide the Background Underneath the Border
How to Define a Class Name on Paragraph Using Markdown
Bootstrap - Removing Padding or Margin When Screen Size Is Smaller