When rotating the table and the td element, an unknown padding is added which I am unable to remove. The box model doesn't show any padding. Please help me in fixing it.
Below is my code which is causing unknown padding on rotation
table {
transform: rotate(270deg);
direction: rtl;
height: 400px;
}
.peopleNames {
width: 400px;
}
.peopleNames h2 {
text-align: center;
}
.innerDiv th,
td {
text-align: center;
padding-right: 50px;
transform: rotate(90deg);
}
<div class="peopleNames">
<h2>Folow the data to know the requirement</h2>
<div class='innerDiv'>
<table>
<thead>
<tr>
<th>
<h1>1</h1>
</th>
<th>
<h1>2</h1>
</th>
<th>
<h1>3</h1>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill do the work within given time</td>
<td>Smith is the best </td>
<td>50min is all you got</td>
</tr>
</tbody>
</table>
</div>
<button>Search</button>
</div>
Related
I want to display rotated text as table headers, using the CSS transform property. The header row should adjust its height as needed, but instead the rotated text just overflows:
demo fiddle
My question is, how to get the table header to grow as needed? Essentially it should look like this:
use
writing-mode: vertical-lr;
https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
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
There are new (experimental) CSS3 feature which does what exactly that: writing-mode.
You have to apply it on a div inside the table cell:
.vrt-header th {
writing-mode: vertical-lr;
min-width: 50px; /* for firefox */
}
<table class='vrt-header'>
<thead>
<tr>
<th>First</th><th>Second</th><th>Third</th>
</tr>
</thead>
<tbody>
<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>
</tbody>
</table>
Thanks to #gman - it works in Firefox but not in Chrome. One can wrap the content of th in div to have the vertical text in Chrome js-fiddle demo but it feels like a kludge.
I struggled to get my <th>'s aligned exactly how I wanted them (even if some are multiple lines).
This is what worked for me:
html { font-family: Helvetica; }
table { border-collapse: collapse; }
td, th { border: 1px solid BurlyWood; }
td { text-align: center; }
th { background-color: NavajoWhite;
color: SaddleBrown;
width:50px;
vertical-align: bottom; }
th span { writing-mode: sideways-lr; /* +90°: use 'tb-rl' */
text-align: left; /* +90°: use 'right' */
padding:10px 5px 0; }
<table>
<tr>
<th><span>First</span></th>
<th><span>Second</span></th>
<th><span>Third<br>Column</span></th>
</tr>
<tr>
<td>foo</td>
<td>foo</td>
<td>foo</td>
</tr>
<tr>
<td>foo</td>
<td>foo</td>
<td>foo</td>
</tr>
</table>
I figured I'd share, partly as reference for "future me". 👴
try this:
.vertical-header span {
writing-mode: vertical-rl;
transform: rotate(180deg);
text-align: left;
max-height: 150px;
}
<table border=1>
<tr>
<th class="vertical-header"><span>Firstname</span></th>
<th class="vertical-header"><span>Lastname</span></th>
<th class="vertical-header"><span>Age</span></th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
well... I know this is not the best solution but you can correct it with client side javascript. In jQuery it would look like this:
$(".verticalTableHeader").each(function(){$(this).height($(this).width())})
as for a pure HTML or CSS solution, I think this is a browser limitation.
To avoid js using I can propose to use flex in first table row.
A little messy with borders in headers, but it could be fixed in thin setup:
.header-row {
display: flex;
flex-direction: row;
}
span {
writing-mode: vertical-lr;
transform: rotate(180deg);
width: 23px;
border-left: 1px solid black;
}
table {
border: 1px solid black;
border-spacing: 0px;
}
td {
border: 1px solid black;
width: 20px;
}
<table>
<tr>
<td></td>
<td colspan="5" style="padding:0;border:none">
<div class="header-row">
<span>Header fsdafasd</span>
<span>Header fsda</span>
<span>Header fsdafa fsdaf</span>
<span>Header asdf</span>
<span>Header fsda</span>
</div>
</td>
</tr>
<tr>
<td>Test name fadsf</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>Test name</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>Test name</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>4</td>
</tr>
</table>
I created something similar, I needed the text to be vertically aligned but without rotation, I did it with the following CSS attributes:
writing-mode: vertical-lr;
text-orientation: upright;
See the example below:
thead {
background-color: black;
color: white;
}
tbody tr td:nth-child(1) {
text-align: center;
}
.vertical {
writing-mode: vertical-lr;
text-orientation: upright;
background-color: silver;
font-weight: bold;
}
<table width="100%">
<thead>
<th>Week</th>
<th colspan="2">Content</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td rowspan="3" class="vertical">BASICS</td>
<td>Topic 1</td>
</tr>
<tr>
<td>2</td>
<td>Topic 2</td>
</tr>
<tr>
<td>3</td>
<td>Topic 3</td>
</tr>
</tbody>
</table>
<thead><tr><th class="rotate"><div>header 1></div></th><th class="rotate"><div>header 2></div></th></tr></thead>
apply CSS to rotate class
th.rotate {
height: 110px; /* header height */
white-space: nowrap;
}
th.rotate > div {
transform:
translate(25px, 51px)
rotate(90deg);
/* rotate(315deg); for diagnol */
width: 30px;
margin-left: -35px;
margin-top: -30px;
}
This works for me
css
.v-text {
transform: rotate(270deg);
display: block;
}
html
<table>
<th>HEADER 1</th>
<th>
<p class="v-text">VERTICAL</p>
</th>
<table>
<style type="text/css">
.rotate > div {
text-align: center;
white-space:nowrap;
g-origin:50% 50%;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg;
-ms-transform: rotate(-90deg;
-o-transform: rotate(-90deg;
transform: rotate(-90deg);
}
https://jsfiddle.net/amrangry/w4ja3qo2/1/
I had a hard time getting these tweaks to work in a consistent manner. Just in case this helps someone, my solution was to create images of vertical text.
I have a problem that I'm trying to solve but have been stuck so far.
I have a table that I use a little trick on it; this results in my table contains the style of
"transform: translate(0,0)"
for a bunch of cells. This is where the problem occurs. I'm having a tooltip in it, which requires position absolute to work. But so far, the tooltip got completely hidden by the translated element. You can see the problem through this:
th, td {
padding: 20px
}
#cell {
background-color: lightblue;
}
.parent {
position: relative;
}
.translate {
transform: translate(0,0);
}
.overflow {
position: absolute;
bottom: -20px;
left: 0;
}
<html>
<head></head>
<body>
<table border="1">
<thead>
<tr>
<th><p>Hi</p></th>
<th class="parent translate">
<p>Hello</p>
<div class="overflow">Overflow text</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>hello cell</td>
<td class="translate" id="cell">hello cell</td>
</tr>
</tbody>
</table>
</body>
</html>
How can I solve this problem? I have tried everything that I have thought of :(. Please help
Simply increase the z-index of the parent element
th, td {
padding: 20px
}
#cell {
background-color: lightblue;
}
.parent {
position: relative;
z-index:2;
}
.translate {
transform: translate(0,0);
}
.overflow {
position: absolute;
bottom: -20px;
left: 0;
}
<html>
<head></head>
<body>
<table border="1">
<thead>
<tr>
<th><p>Hi</p></th>
<th class="parent translate">
<p>Hello</p>
<div class="overflow">Overflow text</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>hello cell</td>
<td class="translate" id="cell">hello cell</td>
</tr>
</tbody>
</table>
</body>
</html>
You are facing the logical result of the painting order where the transformed element are painted after the positioned one since it comes later in the DOM tree and since there is no z-index specified.
Also note that adding z-index to the tooltip won't work because transform create a stacking context so z-index will place the tooltip inside that stacking context which is already placed below the #cell.
th, td {
padding: 20px
}
#cell {
background-color: lightblue;
}
.parent {
position: relative;
}
.translate {
transform: translate(0,0);
}
.overflow {
position: absolute;
bottom: -20px;
left: 0;
z-index:9999;
}
<html>
<head></head>
<body>
<table border="1">
<thead>
<tr>
<th><p>Hi</p></th>
<th class="parent translate">
<p>Hello</p>
<div class="overflow">Overflow text</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>hello cell</td>
<td class="translate" id="cell">hello cell</td>
</tr>
</tbody>
</table>
</body>
</html>
Related questions for more details:
'transform3d' not working with position: fixed children
Why elements with any z-index value can never cover its child?
I have position but z index is not working
I've tried searching, but I don't know what to call this. I'm trying to do accomplish what looks like the left side in this picture:
However when I change the width of the page, it folds and causes an unwanted behavior.
I'm using margin-left: 50px; float:left for the caret and margin-right: 50px for the text.
http://embed.plnkr.co/v68tw85oYqEeBmfCreD5/preview
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css#*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link data-require="font-awesome#*" data-semver="4.3.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<script data-require="jquery#*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<table class="table table-bordered text-center">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Money</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td><i class="fa fa-caret-up" style="float:left; margin-left: 50px"></i><span style="margin-right: 100px">2332</span></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td style="width: 300px"><i class="fa fa-caret-down" style="float:left; margin-left: 50px"></i><span style="margin-right: 100px">1.2</span></td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td><i class="fa fa-caret-down" style="float:left; margin-left: 50px"></i><span style="margin-right: 100px">1.2</span></td>
</tr>
</tbody>
</table>
</body>
</html>
Is there a better way of doing this without the folding?
Try the following: http://jsfiddle.net/jLod5cv9/. Each element of the cell is set to be inline-block and white-space: nowrap declaration should keep these together.
HTML:
<table>
<tr><td class = "up" data-number = "3"></td></tr>
<tr><td class = "down" data-number = "-55"></td></tr>
<tr><td class = "down" data-number = "-44"></td></tr>
<tr><td class = "up" data-number = "1"></td></tr>
<tr><td class = "up" data-number = "65"></td></tr>
</table>
CSS:
table {
border-collapse: collapse;
}
table td {
white-space: nowrap;
border: 1px solid #ccc;
padding: 5px 10px;
color: green;
}
table td.down {
color: red;
}
table td:after {
content: attr(data-number);
display: inline-block;
font: normal 12px/1 Sans-Serif;
width: 25px;
text-align: center;
}
table td:before {
content: "";
display: inline-block;
border-style: solid;
border-width: 0px 4px 5px 4px;
border-color: transparent transparent green transparent;
margin-right: 15px;
}
table td.down:before {
border-width: 5px 4px 0 4px;
border-color: red transparent transparent transparent;
}
When using margin, you tell the page to have a defined margin there. if there is not enough space horizantally to display all parts, then a linebreak is inserted, what causes your strange view. Maybe this could help you.
I can't find a way to have it exactly in the middle mainly because your digits will always change. Sometimes you will have 4, sometimes 2 so getting it exactly the way you provided at the top won't happen. However, if you get it mostly with the same digits, like 2, then the way I posted here will work http://plnkr.co/edit/vQeSURKTVyoeaj6MqsxX?p=preview . I took out your hardcode in the html and used straight css.
css:
/* Styles go here */
tbody tr td { width: 33%;}
tbody tr td:nth-child(4) { width:33%;}
tbody tr td i { width:50%; text-align:right; margin-right:10px;}
tbody tr td span { width:50%; text-align:left;}
html:
<body>
<table class="table table-bordered text-center">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Money</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td><i class="fa fa-caret-up" ></i><span>2332</span></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td><i class="fa fa-caret-down"></i><span>1.2</span></td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td><i class="fa fa-caret-down"></i><span>1.2</span></td>
</tr>
</tbody>
</table>
The nth-child is just in case you want to change certain td containers like color or width.
The layout issue is due to your floated element (caret). If your page shrinks in width, then the columns of your HTML table will also shrink and may cause your elements to wrap onto two lines.
What I would do is wrap the caret and number in a div (HTML table) and in turn put the caret and number in a separate span (HTML table cell). The result is that the caret and the number will always be on a single line and you have some ability to control vertical alignment and spacing (using padding).
.tablecell {
border: 1px dotted blue;
display: table-cell;
}
.table {
display: table;
width: 100px; /* optional */
}
.table span {
display: table-cell;
vertical-align: middle;
height: 50px;
width: 50%;
}
.table span.left {
text-align: right;
padding-right: 5px;
}
.table span.right {
text-align: left;
padding-left: 5px;
}
<div class="tablecell">
<div class="inner table">
<span class="left">x</span>
<span class="right">21</span>
</div>
</div>
I'm looking for a text overflow in a table where the text in a th tag is transformed 90 degrees.
The text should be cut with text-overflow: ellipsis if it's too long for the cell. Here's an example what my table looks like:
http://jsfiddle.net/EHVtR/
.positionFix {
height: 25px;
padding: 75px 0 15px 0;
overflow: hidden;
vertical-align: bottom;
white-space: nowrap;
}
.rotate {
overflow: visible;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-ms-transform: rotate(-90deg);
}
<table border="1">
<tr>
<th class="positionFix">
<div class="rotate" style="width:30px;">item 1</div>
</th>
<th class="positionFix">
<div class="rotate" style="width:30px;">item 2 more text</div>
</th>
<th class="positionFix">
<div class="rotate" style="width:30px;">item 3</div>
</th>
</tr>
<tr>
<td>entry 1</td>
<td>entry 2</td>
<td>entry 3</td>
</tr>
</table>
The problem is that the text overflow determines the length of the String from the width of the cell but in my case it must be the height. Does anyone know a fix for that ?
The solution is that I've added another div which contains the text.
then I take the height from the tr element and put it as the width of the text div. This will calculate the correct text overflow length.
here the corrected version
http://jsfiddle.net/rpQew/
the new css class:
.overflow{
top:5px;
position:relative;
display:inline-block;
width: 150px;
text-align: left;
padding-left: 5px;
padding-right: 5px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
the table:
<table border="1">
<tr id="tableRow">
<th class="positionFix"><div class="rotate"><div class="overflow">item 1 Test text text-overflow test</div></div></th>
<th class="positionFix"><div class="rotate"><div class="overflow">item 2 more text foo bar faz</div></div></th>
<th class="positionFix"><div class="rotate"><div class="overflow">item 3 foo bar foo bar foo bar foo bar foo</div></div></th>
</tr>
<tr>
<td>entry 1</td>
<td>entry 2</td>
<td>entry 3</td>
</tr>
</table>
and the js:
var rowHeight = $('#tableRow').height();
$('.overflow').width(rowHeight+'px');
Add this to your .rotate class
overflow: hidden;
text-overflow: ellipsis;
Updated demo here
Also you need to adjust your .rotate width to achieve this. And one more suggestion, since you already assigned a class name to them, why not put the width in css instead of in-line style?
I want to display rotated text as table headers, using the CSS transform property. The header row should adjust its height as needed, but instead the rotated text just overflows:
demo fiddle
My question is, how to get the table header to grow as needed? Essentially it should look like this:
use
writing-mode: vertical-lr;
https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
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
There are new (experimental) CSS3 feature which does what exactly that: writing-mode.
You have to apply it on a div inside the table cell:
.vrt-header th {
writing-mode: vertical-lr;
min-width: 50px; /* for firefox */
}
<table class='vrt-header'>
<thead>
<tr>
<th>First</th><th>Second</th><th>Third</th>
</tr>
</thead>
<tbody>
<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>
</tbody>
</table>
Thanks to #gman - it works in Firefox but not in Chrome. One can wrap the content of th in div to have the vertical text in Chrome js-fiddle demo but it feels like a kludge.
I struggled to get my <th>'s aligned exactly how I wanted them (even if some are multiple lines).
This is what worked for me:
html { font-family: Helvetica; }
table { border-collapse: collapse; }
td, th { border: 1px solid BurlyWood; }
td { text-align: center; }
th { background-color: NavajoWhite;
color: SaddleBrown;
width:50px;
vertical-align: bottom; }
th span { writing-mode: sideways-lr; /* +90°: use 'tb-rl' */
text-align: left; /* +90°: use 'right' */
padding:10px 5px 0; }
<table>
<tr>
<th><span>First</span></th>
<th><span>Second</span></th>
<th><span>Third<br>Column</span></th>
</tr>
<tr>
<td>foo</td>
<td>foo</td>
<td>foo</td>
</tr>
<tr>
<td>foo</td>
<td>foo</td>
<td>foo</td>
</tr>
</table>
I figured I'd share, partly as reference for "future me". 👴
try this:
.vertical-header span {
writing-mode: vertical-rl;
transform: rotate(180deg);
text-align: left;
max-height: 150px;
}
<table border=1>
<tr>
<th class="vertical-header"><span>Firstname</span></th>
<th class="vertical-header"><span>Lastname</span></th>
<th class="vertical-header"><span>Age</span></th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
well... I know this is not the best solution but you can correct it with client side javascript. In jQuery it would look like this:
$(".verticalTableHeader").each(function(){$(this).height($(this).width())})
as for a pure HTML or CSS solution, I think this is a browser limitation.
To avoid js using I can propose to use flex in first table row.
A little messy with borders in headers, but it could be fixed in thin setup:
.header-row {
display: flex;
flex-direction: row;
}
span {
writing-mode: vertical-lr;
transform: rotate(180deg);
width: 23px;
border-left: 1px solid black;
}
table {
border: 1px solid black;
border-spacing: 0px;
}
td {
border: 1px solid black;
width: 20px;
}
<table>
<tr>
<td></td>
<td colspan="5" style="padding:0;border:none">
<div class="header-row">
<span>Header fsdafasd</span>
<span>Header fsda</span>
<span>Header fsdafa fsdaf</span>
<span>Header asdf</span>
<span>Header fsda</span>
</div>
</td>
</tr>
<tr>
<td>Test name fadsf</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>Test name</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td>Test name</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>4</td>
</tr>
</table>
I created something similar, I needed the text to be vertically aligned but without rotation, I did it with the following CSS attributes:
writing-mode: vertical-lr;
text-orientation: upright;
See the example below:
thead {
background-color: black;
color: white;
}
tbody tr td:nth-child(1) {
text-align: center;
}
.vertical {
writing-mode: vertical-lr;
text-orientation: upright;
background-color: silver;
font-weight: bold;
}
<table width="100%">
<thead>
<th>Week</th>
<th colspan="2">Content</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td rowspan="3" class="vertical">BASICS</td>
<td>Topic 1</td>
</tr>
<tr>
<td>2</td>
<td>Topic 2</td>
</tr>
<tr>
<td>3</td>
<td>Topic 3</td>
</tr>
</tbody>
</table>
<thead><tr><th class="rotate"><div>header 1></div></th><th class="rotate"><div>header 2></div></th></tr></thead>
apply CSS to rotate class
th.rotate {
height: 110px; /* header height */
white-space: nowrap;
}
th.rotate > div {
transform:
translate(25px, 51px)
rotate(90deg);
/* rotate(315deg); for diagnol */
width: 30px;
margin-left: -35px;
margin-top: -30px;
}
This works for me
css
.v-text {
transform: rotate(270deg);
display: block;
}
html
<table>
<th>HEADER 1</th>
<th>
<p class="v-text">VERTICAL</p>
</th>
<table>
<style type="text/css">
.rotate > div {
text-align: center;
white-space:nowrap;
g-origin:50% 50%;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg;
-ms-transform: rotate(-90deg;
-o-transform: rotate(-90deg;
transform: rotate(-90deg);
}
https://jsfiddle.net/amrangry/w4ja3qo2/1/
I had a hard time getting these tweaks to work in a consistent manner. Just in case this helps someone, my solution was to create images of vertical text.