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
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.
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>
I have code similar to this situation:
table {
table-layout: auto;
background-color: tomato;
border: 1 solid black;
}
.table-wrapper {
display: inline-block;
}
.tabs {
background-color: #00bcd4;
}
<div>
<div class="tabs">
smth
</div>
<div class="table-wrapper">
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Sample</th>
<th>Sample</th>
<th>Sample</th>
</tr>
<tr>
<td>Jill31222222</td>
<td>Smith12333333333333</td>
<td>5031231231231232</td>
<td>Jill31231231231</td>
<td>Smith312312312312</td>
<td>50312312312312312</td>
</tr>
<tr>
<td>Eve12312312312</td>
<td>Jackson1233123123123123312</td>
<td>94312312312312</td>
<td>Jill312312312312</td>
<td>Smith312312312</td>
<td>5031233123123123</td>
</tr>
</table>
</div>
</div>
I have a table with table-layot: auto style, which cells display very large text. Above table are displayed tabs. After horizontal scrolling tabs div is cut.
Is there a possibility to stretch tabs div, depending on table's width?
Relevant image:
A div (or any element with display:block) is only as wide as its container.
So one solution is to put it in a container that is as wide as the table. For instance, an inline-block around the table, which will stretch itself to the correct width.
.div-and-table-wrapper {
display:inline-block;
min-width:100%;
}
table {
table-layout: auto;
background-color: tomato;
border: 1 solid black;
}
.table-wrapper {
display: inline-block;
}
.tabs {
background-color: #00bcd4;
}
<div class="div-and-table-wrapper">
<div class="tabs">
smth
</div>
<div class="table-wrapper">
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Sample</th>
<th>Sample</th>
<th>Sample</th>
</tr>
<tr>
<td>Jill31222222</td>
<td>Smith12333333333333</td>
<td>5031231231231232</td>
<td>Jill31231231231</td>
<td>Smith312312312312</td>
<td>50312312312312312</td>
</tr>
<tr>
<td>Eve12312312312</td>
<td>Jackson1233123123123123312</td>
<td>94312312312312</td>
<td>Jill312312312312</td>
<td>Smith312312312</td>
<td>5031233123123123</td>
</tr>
</table>
</div>
</div>
(Note: the min-width is in there to ensure that the tabs div will be at least as wide as the window in case the table is narrower.
If you don't want that, i.e. if you want the tabs div to always be the same width as the table, perhaps you're better off turning it into a caption.)
You need to set the width of the parent div to fit-content:
table {
table-layout: auto;
background-color: tomato;
border: 1 solid black;
}
.table-wrapper {
display: inline-block;
}
.tabs {
background-color: #00bcd4;
}
.tabs-wrapper {
width: fit-content;
}
<div class="tabs-wrapper">
<div class="tabs">
smth
</div>
<div class="table-wrapper">
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Sample</th>
<th>Sample</th>
<th>Sample</th>
</tr>
<tr>
<td>Jill31222222</td>
<td>Smith12333333333333</td>
<td>5031231231231232</td>
<td>Jill31231231231</td>
<td>Smith312312312312</td>
<td>50312312312312312</td>
</tr>
<tr>
<td>Eve12312312312</td>
<td>Jackson1233123123123123312</td>
<td>94312312312312</td>
<td>Jill312312312312</td>
<td>Smith312312312</td>
<td>5031233123123123</td>
</tr>
</table>
</div>
</div>
An alternative would be, as Mr Lister already suggested, using inline-block instead of fit-content.
I am trying to have a triangle/arrow at the right of arrow-td. Initial plot with the code below works but the triangle/arrow doesn't scroll with its container arrow-td.
How could I keep the triangle positioned relative to arrow-td even when the user scrolls through main-div?
NOTE: The arrow should stay outside (just right) of main-div. Adding position: relative to arrow-td won't work as that would force arrow to be inside of main-div since overflow-y: auto is activated on main-div.
Check out the plunker
HTML
<div class="main-div">
<table>
<tbody>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td class="arrow-td">
<div class="left-of-arrow">With arrow</div>
<div class="arrow"></div>
</td>
</tr>
.........
</tbody>
</table>
</div>
CSS
.main-div{
height: 200px;
width: 200px;
overflow-y: auto;
}
table{
width: 100%;
max-width: 100%;
}
td{
width: 100%;
background-color: #eee;
display: flex;
}
td>div{
display: flex;
}
.arrow{
right: 300px;
position: absolute;
width: 0;
height: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-right: 12px solid red;
}
Isn't possible to your arrow track your td without adding a position relative and changing you main-div width to 100% and setting a size to your table, like I did on that plunker
See my Plunker
To do what you wan't you'll need to add a JavaScript function to track the offset of that td every time you scroll the page, and setting the top property of your arrow.
EDIT:
I wasn't in home yesterday, so, I couldn't write a code to solve your issue. I saw your code and there is some issues on your approach. I can't comment there because I don't have karma. But I did some comments on that fork, explaining why those approaches aren't that good.
Updated Plunker
You have your .arrow set with position absolute, meaning it will not be relative to any scrolling you do unless you explicitly specify it to be.
So, by adding position: relative to your .main-div, you will achieve the arrow moving relative to the .arrow-td.
Where your design fails in look and feel is on the .main-div itself. It has a fixed width of 200px. This may be intentional but for your purposes of having the arrow sit outside the table, it will just not be possible using the current HTML structure you have.
One thing you can do is play with how overflow works for your type of problem.
I decided to take a swing at implementing a solution which is what you see below... however the final implementation is truly up to you! I also put in comments a second version of how this could look, in the CSS named Example #2 give it a try :-)
.wrapper {
overflow-y: auto;
width: 335px; /* Example #2: change this to: 100% for a different visual effect */
}
.main-div {
height: 200px;
width: 100%; /* Example #2: change this to 200px for a different visual effect */
}
table {
width: 100%;
max-width: 100%;
}
td {
width: 100%;
background-color: #eee;
display: flex;
}
td > div {
display: flex;
}
.arrow {
left: 300px;
position: absolute;
width: 0;
height: 0;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
border-right: 12px solid red;
}
.arrow-td {
position: relative;
}
<div class="wrapper">
<div class="main-div">
<table>
<tbody>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td class="arrow-td">
<div class="left-of-arrow">With arrow</div>
<div class="arrow"></div>
</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
<tr>
<td>Hello</td>
</tr>
</tbody>
</table>
</div>
</div>
This is how I solved the problem through javascript:
I simply track arrow-td's top position, if it is changed .arrow div's top position should also be modified accordingly.
Check out the PLUNKER
Code:
$(document).ready(function(){
setInterval(function(){
var heightLimit = $(".main-div").height();
var parentTop = $(".arrow").parent().position().top;
var arrowTop = $(".arrow").position().top;
//Change arrow top position only if parent's position has been changed
if(arrowTop != parentTop){
if(parentTop < 0 || parentTop > heightLimit -25){
$(".arrow").css("visibility","hidden");
}
else{
$(".arrow").css("visibility","visible");
$(".arrow").css("top",parentTop);
}
}
},500);
});
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.