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?
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>
This question already has answers here:
CSS Rotate Text Vertical - Extra Space on both sides
(4 answers)
Closed 5 years ago.
I'm trying to rotate my table headings so they're laid out vertically, but the surrounding th elements end up smaller than the div. It's as though the th is sizing itself according to the div before the rotation.
How to I make the th automatically size based on the rotated div?
.columnHeader {
transform: rotate(-90deg);
}
th {
background-color: #f88;
}
<table>
<tr>
<th>
<div class="columnHeader">One</div>
</th>
<th>
<div class="columnHeader">Two</div>
</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
Edit: This question got closed due to a dup, but that dup doesn't contain a great answer, so let me post a really clean solution here:
.columnHeader {
writing-mode: vertical-rl;
transform: rotate(180deg);
white-space: nowrap;
}
th {
background-color: #f88;
}
td {
text-align: center;
}
<table>
<tr>
<th>
<div class="columnHeader">One long heading</div>
</th>
<th>
<div class="columnHeader">Two long headings</div>
</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
Note that the "vertical-rl" mode actually becomes left-to-right after the 180-degree rotation.
Edit 2: Thanks to those who provided answers, but I haven't upvoted or accepted most of them because, as I write this, they don't solve the original problem of how to size an element according to rotated text. Some of them manually tweak the element size in pixels or ems, but of course I could have done that in the first place; any element's size can be tweaked manually. That's not what I meant to ask for; if that's unclear, I could reword this post's title.
You may use writing-mode
The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.
.columnHeader {
writing-mode:vertical-lr;
writing-mode:sideways-lr; /* FF or use transform and vertical-lr*/
}
th {
background-color: #f88;
width: 1.2em;/* which means min-width according to the table-layout algorythm.*/
}
<table>
<tr>
<th>
<div class="columnHeader">One of any length</div>
</th>
<th>
<div class="columnHeader">Two</div>
</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
codepen example https://codepen.io/gc-nomade/pen/EKQKBe
edit
deleted and not, left here for infos.
* You can use float and a pseudo element and a vertical %padding to draw a square to start width.
The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.
Unlike margin properties, values for padding values cannot be negative. Like margin properties, percentage values for padding properties refer to the width of the generated box's containing block.
Adding a negative margin-right value will virtually reduce width of .columHeader to null.
rotate .columnHeader
add a width to th (which will be alike min-width ).
.columnHeader {
transform: rotate(-90deg);
}
th {
background-color: #f88;
width: 1.2em;
}
.columnHeader {
float: left;
margin-right: -20em;
}
.columnHeader:before {
content: '';
float: left;
padding-top: 105%;
}
<table>
<tr>
<th>
<div class="columnHeader">One of any length</div>
</th>
<th>
<div class="columnHeader">Two</div>
</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
codepen example
https://codepen.io/gc-nomade/pen/Cqkig
you can rotate th
th {
background-color: #f88;
transform: rotate(-90deg);
}
table td {
text-align:center;
}
th {
background-color: #f88;
transform: rotate(-90deg);
}
<table>
<tr>
<th>
<div class="columnHeader">One</div>
</th>
<th>
<div class="columnHeader">Two</div>
</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
You could add padding to the div
.columnHeader {
transform: rotate(-90deg);
padding: 10px 0;
}
th {
background-color: #f88;
}
<table>
<tr>
<th>
<div class="columnHeader">One</div>
</th>
<th>
<div class="columnHeader">Two</div>
</th>
</tr>
<tr>
<td>1</td>
<td>2</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.
I am trying to position a span element relative to the upper-right corner of a table object.
This table may be wider or move around based on what the user does on the tool, so I was looking for something simpler than the jQuery.position method. I was hoping to do something elegant with CSS.
I've built a small example of my dilemma in jsfiddle: http://jsfiddle.net/xerf/ZSGfc/
<div>
<table>
<thead>
<tr>
<th colspan="3">Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>Stuff 1</td>
<td>Stuff 2</td>
<td>Stuff 3</td>
</tr>
<tr>
<td>Stuff 1</td>
<td>Stuff 2</td>
<td>Stuff 3</td>
</tr>
<tr>
<td>Stuff 1</td>
<td>Stuff 2</td>
<td>Stuff 3</td>
</tr>
</tbody>
</table>
<span>×</span>
</div>
Below are the CSS Styles
body
{
font-family:sans-serif;
}
table
{
border-collapse: collapse;
border: 1px solid black;
margin: 20px;
}
th
{
padding: 6px;
}
td
{
padding: 3px;
border: 1px solid black;
}
UPDATE: Added some images to show required positions:
Needs to be where the red Square appears above
I wrapped your span in a div and placed it in the <th> with your title:
<th colspan="3"><div id="container">Title
<span>×</span></div></th>
css:
#container{
width:auto;
height:auto;
position:relative;
}
span{
position:absolute;
right:0px;
top:0px;
Here is a demo: http://jsfiddle.net/ZSGfc/6/
A very simple way would be to simply add another row to the very top of the table, removing its left, top and right borders. Then move your span so that it is contained by this new row and align the text to the right.
I would recommend using the div or adding another div that will control the width of the table, and then have the table inherit the width of that div. From there make the div's position property set to relative. Then you can absolutely position the span on the div.
Something similar to this fiddle. With some tweaking.
Try this:
div{
position:relative;
width: XXXpx;
}
table{
width: XXXpx;
}
span{
position: absolute;
top: 0px;
right: 0px;
}
an additional table cell on top with colspan="3" and text-align:right would work.