I'm trying to do a table in HTML, and I have a problem. Don't know how to do what I'm going to explain:
Is there any possibility that I could convert a cell that is below/adjoined to another one that has long vertical text into a small square format without taking up the same long vertical text format from the cell right above it?
Here's the HTML document:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Marge Cells</title>
<link rel="stylesheet" type="text/css" href="dudas.css">
</head>
<body>
<table border="1px">
<tr>
<td>
</td>
<td class="Rotate-90">
corto
</td>
<td class="Rotate-90">
text muuuuy largo
</td>
</tr>
<tr>
<td>
Cuentas
</td>
<td>
11.2€
</td>
<td>
1€
</td>
</tr>
</table>
</body>
</html>
And here the CSS:
#charset "UTF-8";
.Rotate-90
{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
position:relative;
height: 15px;
width: 30 px;
}
table {
border-collapse: collapse;
}
Here's a picture of what I'm trying to achieve
--- new ---
Now i understand you..
.table-r {
border-collapse: collapse;
}
.table-r td {
width: 30px;
}
..table-r th {
padding: 5px 10px;
}
.table-r td {
text-align: center;
padding: 10px 5px;
border: 1px solid #ccc;
}
.table-r th.th-r {
height: 140px;
white-space: nowrap;
}
.table-r th.th-r > div {
transform: translate(25px, 51px) rotate(315deg);
width: 30px;
}
.table-r th.th-r > div > span {
border-bottom: 1px solid #ccc;
padding: 5px 10px;
}
.table-header-rotated th.row-header {
padding: 0 10px;
border-bottom: 1px solid #ccc;
}
<table class="table-r">
<thead>
<tr>
<th class="th-r">
<div><span>Header 1</span>
</div>
</th>
<th class="th-r">
<div><span>Header 2</span>
</div>
</th>
<th class="th-r">
<div><span>Header 3</span>
</div>
</th>
<th class="th-r">
<div><span>Header 4</span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
</tbody>
</table>
--- old ---
Is this what you mean ?
.Rotate-90 {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
position: relative;
height: 15px;
width: 30 px;
}
table {
border-collapse: collapse;
}
<table>
<tr>
<th rowspan="4" class="Rotate-90">text vertical</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
<tr>
<td>4</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
</table>
You have rowspan and colspan.
colspan does this:
+-------------------+
| 1 |
+-------------------+
| 3 | 4 | 7 | 8 |
+----+----+----+----+
| 9 | 10 | 11 | 12 |
+----+----+----+----+
| 13 | 14 | 15 | 16 |
+----+----+----+----+
rowspan does this:
+----+----+----+----+
| 1 | 2 | 3 | 4 |
+ +----+----+----+
| | 4 | 7 | 8 |
+ +----+----+----+
| | 10 | 11 | 12 |
+ +----+----+----+
| | 14 | 15 | 16 |
+----+----+----+----+
Rowspan and Colspan combined:
+---------+----+----+
| 1 | 3 | 4 |
+ +----+----+
| | 7 | 8 |
+---------+----+----+
| 9 | 10 | 11 | 12 |
+----+----+----+----+
| 13 | 14 | 15 | |
+----+----+----+----+
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.
This is my web template. I want to freeze the header part and also the "#" and "Rank" columns. Vertical scrolling should scroll through the rows only and horizontal scrolling should scroll through Header3 onwards.
| # | Rank | Header3 | Header4 | Header5 | Header6 |
[] | #1 | Rank1 |
[] | #2 | Rank2 |
[] | #3 | Rank3 |
[] | #4 | Rank4 |
[] | #5 | Rank5 |
[] | #6 | Rank6 |
I would think there should be separate tags with different css styles. One of which the headers css style should contain position:fixed.
<div class="form-horizontal table-responsive table-masterinput">
<table class="table table-hover table-bordered table-striped" id="whatever">
<thead>
<tr>
<th></th>
<th class="text-center">#</th>
<th class="text-center">Rank</th>
<th class="text-center">Header3</th>
<th class="text-center">Header4</th>
<th class="text-center">Header5</th>
<th class="text-center">Header6</th>
</tr>
</thead>
<tbody>
#{
var index = 1;
if (Model != null && Model.Any())
{
foreach (var items in Model)
{
total += 1;
<tr class="checkCountData" id=#("item" + index)>
<td>
<input type="checkbox" name="#items.Id" id="#items.Id" />
</td>
<td>
<label data-Id="#items.Id" style="width: 100px; text-align: center" class="inputRank" name="inputRank">#items.RANK_CODE</label>
</td>
<td>Item3</td>
<td>Item4</td>
<td>Item5</td>
<td>Item6</td>
</tr>
index++;
}
}
}
</tbody>
</table>
This is my css:
.table-masterinput {
overflow-x: auto;
height: auto;
bottom: 0px;
top: 300px;
right: 0px;
left: 180px;
position: fixed;
}
Can someone please help?
try this with jquery and css or try this fiddle check here
$(document).ready(function() {
$('tbody').scroll(function(e) { //detect a scroll event on the tbody
/*
Setting the thead left value to the negative valule of tbody.scrollLeft will make it track the movement
of the tbody element. Setting an elements left value to that of the tbody.scrollLeft left makes it maintain it's relative position at the left of the table.
*/
$('thead').css("left", -$("tbody").scrollLeft()); //fix the thead relative to the body scrolling
$('thead th:nth-child(1), thead th:nth-child(2)').css("left", $("tbody").scrollLeft()); //fix the first cell of the header
$('tbody td:nth-child(1), tbody td:nth-child(2)').css("left", $("tbody").scrollLeft()); //fix the first column of tdbody
});
});
table {
position: relative;
width: 700px;
background-color: #aaa;
overflow: hidden;
border-collapse: collapse;
}
/*thead*/
thead {
position: relative;
display: block; /*seperates the header from the body allowing it to be positioned*/
width: 700px;
overflow: visible;
}
thead th {
background-color: #99a;
min-width: 120px;
height: 32px;
border: 1px solid #222;
}
thead th:nth-child(1) {/*first cell in the header*/
position: relative;
display: block; /*seperates the first cell in the header from the header*/
background-color: #88b;
}
thead th:nth-child(2) {/*first cell in the header*/
position: relative;
background-color: #88b;
}
/*tbody*/
tbody {
position: relative;
display: block; /*seperates the tbody from the header*/
width: 700px;
height: 239px;
overflow: scroll;
}
tbody td {
background-color: #bbc;
min-width: 120px;
border: 1px solid #222;
}
tbody tr td:nth-child(1) { /*the first cell in each tr*/
position: relative;
display: block; /*seperates the first column from the tbody*/
height: 40px;
background-color: #99a;
}
tbody tr td:nth-child(2) { /*the first cell in each tr*/
position: relative;
height: 40px;
background-color: #99a;
}
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th>#</th>
<th>Rank</th>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
<th>Header5</th>
<th>Header6</th>
</tr>
</thead>
<tbody>
<tr>
<td>#1</td>
<td>Rank1</td>
<td>Cheshire</td>
<td>52</td>
<td>Brewer</td>
<td>£47,000</td>
<td>Married</td>
<td>2</td>
</tr>
<tr>
<td>#2</td>
<td>Rank2</td>
<td>Cumbria</td>
<td>34</td>
<td>Shepherdess</td>
<td>£28,000</td>
<td>Single</td>
<td>0</td>
</tr>
<tr>
<td>#3</td>
<td>Rank3</td>
<td>Wiltshire</td>
<td>57</td>
<td>Musician</td>
<td>£124,000</td>
<td>Married</td>
<td>4</td>
</tr>
<tr>
<td>#4</td>
<td>Rank4</td>
<td>Worchestershire</td>
<td>48</td>
<td>Naturalist</td>
<td>£65,000</td>
<td>Married</td>
<td>2</td>
</tr>
<tr>
<td>#5</td>
<td>Rank5</td>
<td>Hertfordshire</td>
<td>67</td>
<td>Pharmasist</td>
<td>Retired</td>
<td>Married</td>
<td>3</td>
</tr>
<tr>
<td>#6</td>
<td>Rank6</td>
<td>Lothian </td>
<td>36</td>
<td>Vigilante</td>
<td>£86,000</td>
<td>Single</td>
<td>Unknown</td>
</tr>
<tr>
<td>#7</td>
<td>Rank7</td>
<td>Bedfordshire</td>
<td>43</td>
<td>Housewife</td>
<td>N/A</td>
<td>Married</td>
<td>1</td>
</tr>
<tr>
<td>#8</td>
<td>Rank8</td>
<td>New York</td>
<td>55</td>
<td>Policewoman</td>
<td>$36,000</td>
<td>Single</td>
<td>1</td>
</tr>
<tr>
<td>#9</td>
<td>Rank9</td>
<td>Lincolnshire</td>
<td>45</td>
<td>Landowner</td>
<td>Lots</td>
<td>Married</td>
<td>6</td>
</tr>
<tr>
<td>#10</td>
<td>Rank10</td>
<td>Cheshire</td>
<td>352</td>
<td>Arcanist</td>
<td>A pile of gems</td>
<td>Single</td>
<td>0</td>
</tr>
</tbody>
</table>
</body>
</html>
I want to build a table with slanted column headers as shown in the image below.
But I am not able to align the slanted header div with actual column and the text is overflowing the column header. here is the link to my code.
My question is how do we align the slanted column header with the column below it and contain the text within it ?
Here is my code below
<table>
<tr>
<td>
<div class="outerDiv">
<div class="innerDiv">This is first column header </div>
</div>
</td>
<td>
<div class="outerDiv">
<div class="innerDiv">This is second column header</div>
</div>
</td>
<td>
<div class="outerDiv">
<div class="innerDiv">This is third column header</div>
</div>
</td>
</tr>
<tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> </tr>
<tr> <td> 4 </td> <td> 5 </td> <td> 6 </td> </tr>
<tr> <td> 7 </td> <td> 8 </td> <td> 9 </td> </tr>
<tr> <td> 10 </td> <td> 11 </td> <td> 12 </td> </tr>
</table>
CSS:
.outerDiv {
background: grey;
height: 200px;
width: 100px;
border: 1px solid black;
transform: skew(-30deg);
}
body, html {
height: 100%;
}
.innerDiv{
transform:skew(45deg);
writing-mode: vertical-lr;
}
body {
display: flex;
justify-content: center;
}
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
Here's another attempt. I changed the header cells to th. I added a translateX to get it to line up better. For the inside dev I reversed skewed it so the text didn't look funny and then rotated the container so it was still at a slant following the container. Also added some positioning to get it to look right.
https://jsfiddle.net/b1mrksou/3/
The CSS I added:
* {
box-sixing: border-box;
}
.outerDiv {
background: grey;
height: 200px;
width: 100px;
border: 1px solid black;
border-bottom: 0;
border-left: 0;
transform: skew(-30deg) translateX(58%);
}
th:first-child .outerDiv {
border-left: 1px solid black;
position: relative;
}
.innerDiv {
position: absolute;
width: 250px;
height: 85px;
bottom: -34%;
left: 10px;
transform: skew(30deg) rotate(-60deg);
transform-origin: 0 0;
text-align: left;
}
This seems like the best solution I could come up with. http://jsbin.com/yecevosunu
<!doctype html><style>
table { border-collapse: collapse;}
td {border: 1px solid #000;}
</style><table class=tilttable>
<thead>
<tr>
<th>word</th>
<th>words and more and more words</th>
<th>two<br>words</th>
<th>word</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
</table>
<script>
function toDegrees (angle) {return angle * (180 / Math.PI);}
function toRadians (angle) {return angle * (Math.PI / 180);}
onload=function(){
var tilttables = document.getElementsByClassName('tilttable');
[].forEach.call(tilttables[0].rows[0].cells
, function (i) {
i.style.verticalAlign = "bottom";
i.innerHTML = "<div><div>" + i.innerHTML + "</div></div>";
i.firstChild.firstChild.setAttribute('style',"transform-origin:top left;transform: rotate(-45deg);");
tilt(i.firstChild.firstChild);
});
}
function tilt(d){
var w = d.clientWidth;
var h = d.clientHeight;
d.parentElement.style.width = h*Math.cos(toRadians(45))+"px";
d.style.whiteSpace="nowrap";
d.parentElement.style.paddingTop = w*Math.sin(toRadians(45))+"px";
d.parentElement.style.height = h*Math.sin(toRadians(45))+"px";
}
</script>
you could use writing-mode, a pseudo element, transform and some tunning with margins:
table {
margin-right: 6em;
}
th {
padding: 0;
position: relative
}
th>div {
white-space:nowrap;
margin: -1em -2em -1em 6em;/* tune this to your needs, you might also see & update transform-origin */
padding: 0;
-webkit-writing-mode: vertical-lr;
/* old Win safari */
writing-mode: vertical-lr;
writing-mode: tb-lr;
transform: scale(-1, -1) rotate(45deg);
}
th:before {
position: absolute;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
border: solid;
transform: skew(-45deg);
transform-origin: bottom left;
}
td {
border: solid;
}
<table>
<tr>
<th>
<div class="innerDiv"> first </div>
</th>
<th>
<div class="innerDiv">This is second column header</div>
</th>
<th>
<div class="innerDiv">This is third header</div>
</th>
</tr>
<tr>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</tr>
<tr>
<td> 4 </td>
<td> 5 </td>
<td> 6 </td>
</tr>
<tr>
<td> 7 </td>
<td> 8 </td>
<td> 999999999999999 </td>
</tr>
<tr>
<td> 10 </td>
<td> 11 </td>
<td> 12 </td>
</tr>
</table>
http://codepen.io/gc-nomade/pen/xqdNGN
I am creating a dynamic table generator, and during testing, I found that the following generated HTML gives an unexpected layout in all browsers (Firefox, Chrome, IE)
<table>
<tr>
<td rowspan="2"></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
</tr>
</table>
I am expecting a 2x3 table, with top corner merged with the left cell in middle row, and and the middle row right cell merged with the bottom right cell but instead i ended up with a 2X2 grid
side note, even if I provided a height on the css or the row/cell attribute; doesn't change layout of the resulting table.
p/s i don't intend to use this for layouts; i just will like to idiot proof my codes from unintended effects from weird layouts such as this
Edit:
Expected:
|------|-------|
| | |
| | |
| |-------|
| | |
| | |
|------| |
| | |
| | |
|------|-------|
Result:
|------|-------|
| | |
| | |
|------|-------|
| | |
| | |
|------|-------|
Edit 2:
added CSS
table {
border: 2px solid #000000;
padding: 10px;
}
td {
border: 2px solid #FF0000;
height: 100px;
width: 100px;
padding: 10px;
}
tr {
border: 2px solid #00FF00;
padding: 10px
}
I also tried:
<table>
<tr>
<td rowspan="2" style="border: 1px solid #FF0000; height:200px"></td>
<td style="border: 1px solid #FF0000; height:100px"></td>
</tr>
<tr>
<td rowspan="2" style="border: 1px solid #FF0000; height:200px"></td>
</tr>
<tr>
<td style="border: 1px solid #FF0000; height:100px"></td>
</tr>
</table>
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.