Table not resizing to 100% vertically? - html

I have a quick problem for you guys. I'm still learning HTML, but I'm working on a personal page and want boxes spread out across the entire window, no matter how big or small the window is. It works great when I do it horizontally, but never works vertically. It just stays in a standard format downwards.
My Code
HTML:
<table class="table" border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
CSS:
.table {
width: 100%;
height: 100%;
text-align: center;
vertical-align: central;


Is your body and html selectors are have 100% of height? If not, extend your stylesheet with this:
html,
body {
height: 100%;
}


It is not resizing because setting table { height:100%; } is just telling it to fill 100% of its parent. You will need to set your html and body to height:100%
jsFiddle
html,
body {
height: 100%;
margin:0;
}
.table {
width: 100%;
height: 100%;
text-align: center;
vertical-align: central;
}


How about height: 100% !important; perhaps this will make it work.

Related

how to create this table with HTML or MARKDOWN only? [duplicate]

This question already has answers here:
How do you use colspan and rowspan in HTML tables?
(11 answers)
Closed 2 years ago.
I need to create a document with the table below, it can be either in HTML or in MARKDOWN, but I simply cannot do it. The difficult is in splitting the LATAM and ITPT into multiple rows. Can someone help please?

You can make this using colspan and rowspan on html based on table.
<table border="1" width="100%">
<tr>
<td colspan="2">HCM</td>
<td>C88</td>
<td>C7Z</td>
<td>C6Z</td>
<td>CHR</td>
<td>CHR</td>
</tr>
<tr>
<td colspan="2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="5" style="writing-mode: vertical-rl; text-orientation: upright;">LATAM</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

td {
border: 2px solid black;
text-align: center
}
table {
border-collapse: collapse;
}
.break {
word-break: break-all;
width: 1em;
letter-spacing: 1em;
}
<table>
<tr>
<td colspan=2>HCM</td>
<td>C88</td>
<td>C7Z</td>
<td>C7H</td>
<td>C6Z</td>
<td>CHR</td>
</tr>
<tr>
<td colspan=2>BR</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan=5 class="break">LATAM</td>
<td>AR</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>CL</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>CO</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>MX</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>VE</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>ES</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>NA</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan=2 class="break">ITPT</td>
<td>IT</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>PT</td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr></tr>
</table>
Relatively painstaking, but it works

Using colspan and rowspan you can manipulate how each td is displayed, for example to output the structure you have shown in your design containing LATAM, you are required to use rowspan=5. This will indicate that the said td element will 'stretch', for want of a better word, over 5 rows.
Note I understand you have asked for this to be done in HTML only, the height and border are for better visualization.
td {
border: 1px solid black;
height: 32px;
}
<table>
<tr>
<td colspan=2>
HCM
</td>
<td>
C88
</td>
<td>
C7Z
</td>
<td>
C7H
</td>
<td>
C6Z
</td>
<td>
CHR
</td>
</tr>
<tr>
<td colspan=2>
BR
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td rowspan=5 style=>
L<br>A<br>T<br>A<br>M
</td>
<td>
AR
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
CL
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
CO
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
MX
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
VE
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td colspan=2>
ES
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td colspan=2>
NA
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td rowspan=5 style=>
I<br>T<br>P<br>T
</td>
<td>
IT
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
PT
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>

Best approach, building complex HTML table [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I need to build a complex table in HTML for schedule web-application.
It should looks like so:
http://s7.postimg.org/f3m25bnuj/schedule_layout.jpg
How can I achieve this in HTML?
Which approach is best to build such a table?
Is "Bootstrap" CSS framework capable to do that too?
My table will have more than 12 columns

That is a pretty complex table. I would recommend that you use some visual tools (like Dreamweaver) to draw this table. Trying such complex table by code is possible but its very time consuming and could result in errors that might have to re-check and redo. Bootstrap has style definitions that you can apply to a table, but trying this particular table via bootstrap css is possible but time consuming. check this jsfiddle: https://jsfiddle.net/brijeshb/zn9eo7uu/
<table width="80%" border="1" cellspacing="1" cellpadding="2">
<tr>
<td width="8%"> </td>
<td width="8%"> </td>
<td width="8%"> </td>
<td width="14%"> </td>
<td width="5%"> </td>
<td width="8%"> </td>
<td width="8%"> </td>
<td width="8%"> </td>
<td width="8%"> </td>
<td width="8%"> </td>
<td width="8%"> </td>
<td width="9%"> </td>
</tr>
<tr>
<td rowspan="21"> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td> </td>
<td rowspan="10"> </td>
<td> </td>
<td> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td> </td>
<td> </td>
<td> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td> </td>
<td rowspan="5"> </td>
<td> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

what have you tried so far? tables would not be recommended for layout purposes and it really depends on a few things for example, does you app need to be responsive? what data would each "box" display? pictures?.
If I were you I would try to use some grid system to start with but the table approach would be too messy and not suitable for creating a layout of that kind.

Yes, you can achieve this in HTML by using colspan and rowspan attributes.
You should use table element only.
"Bootstrap" framework should be used in order to achieve the responsive design.
In smaller screens like ipad, mobile devices, use the following library to avoid distortion.
http://fooplugins.com/plugins/footable-jquery/

How would I go about making a hole in an HTML table?

Table with spaces that I'm trying to get in the middle
How do I get blank spaces in my table? I want to get it to look like the image above, but I want those empty spaces to be in the middle of the table rather than on the side.
<table style="width:100%" border="1" cellpadding="10">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td> <!-- Added to show the kind of space I want in the table -->
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
I'm not sure what I'm doing wrong here. I've looked up several different things but none of them seem to tell me exactly what I'm supposed to do.

I'd try to approach this using CSS instead of a border attribute on the parent table. As is, you're setting a border on every cell in the table, and you want to pick whether or not you're going to show a border on a per-cell basis.
Basically, I'd:
<style type="text/css">
.borderedTable tr td {
border: solid 1px black;
}
.tableCellWithoutBorder {
border-width: 0px;
}
</style>
<table cellpadding="10" class="borderedTable">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="tableCellWithoutBorder"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="tableCellWithoutBorder"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="tableCellWithoutBorder"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="tableCellWithoutBorder"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="tableCellWithoutBorder"> </td>
</tr>
</table>

CSS: 100% table height and scrollable tbody

I'm trying to set table height to 100% and have scrollable tbody. Why does my html element grow outside browser window? How can I get scrollbar for tbody instead of html element? I've checked&tried all solutions I could find but none seem to work with my table.
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
Table with autoscroll and fixed headers
</title><link rel="stylesheet" type="text/css" href="autoscroll.css" />
<script>
function scrollElementById(elementId) {
document.getElementById(elementId).scrollTop = document.getElementById(elementId).scrollTop + 1;
scrolldelay = setTimeout('scrollElementById(\'' + elementId + '\')', 100); // scrolls every 100 milliseconds
}
</script>
</head>
<body onload="scrollElementById('tableData')">
<table>
<thead>
<tr>
<td>foo</td>
<td>bar</td>
</tr>
</thead>
<tbody id="tableData">
<tr>
<td> a </td>
<td> b 9.2 </td>
</tr>
<tr>
<td> 899 </td>
<td> c </td>
</tr>
<tr>
<td> 607 </td>
<td> c </td>
</tr>
<tr>
<td> 606 </td>
<td> c </td>
</tr>
<tr>
<td> 605 </td>
<td> b 2.1 </td>
</tr>
<tr>
<td> 604 </td>
<td> b 3.5 </td>
</tr>
<tr>
<td> 315 </td>
<td> c </td>
</tr>
<tr>
<td> 313 </td>
<td> c </td>
</tr>
<tr>
<td> 160 </td>
<td> d </td>
</tr>
<tr>
<td> 159 </td>
<td> d </td>
</tr>
<tr>
<td> 159 </td>
<td> d </td>
</tr>
<tr>
<td> 157 </td>
<td> d </td>
</tr>
<tr>
<td> 156 </td>
<td> d </td>
</tr>
<tr>
<td> 155 </td>
<td> d </td>
</tr>
<tr>
<td> 154 </td>
<td> d </td>
</tr>
<tr>
<td> 150 </td>
<td> d </td>
</tr>
<tr>
<td> 143 </td>
<td> d </td>
</tr>
<tr>
<td> 142 </td>
<td> d </td>
</tr>
<tr>
<td> 140 </td>
<td> c </td>
</tr>
<tr>
<td> 139 </td>
<td> d </td>
</tr>
<tr>
<td> 139 </td>
<td> d </td>
</tr>
<tr>
<td> 135 </td>
<td> d </td>
</tr>
<tr>
<td> 134 </td>
<td> d </td>
</tr>
<tr>
<td> 125 </td>
<td> d </td>
</tr>
<tr>
<td> 122 </td>
<td> d </td>
</tr>
<tr>
<td> 183 </td>
<td> b 0.1 </td>
</tr>
<tr>
<td> 179 </td>
<td> d </td>
</tr>
<tr>
<td> 177 </td>
<td> d </td>
</tr>
<tr>
<td> 174 </td>
<td> d </td>
</tr>
<tr>
<td> 172 </td>
<td> b 2.0 </td>
</tr>
<tr>
<td> 172 </td>
<td> c </td>
</tr>
<tr>
<td> 165 </td>
<td> d </td>
</tr>
<tr>
<td> 119 </td>
<td> c </td>
</tr>
<tr>
<td> 103 </td>
<td> c </td>
</tr>
<tr>
<td> 102 </td>
<td> c </td>
</tr>
<tr>
<td> 102 </td>
<td> c </td>
</tr>
</tbody>
</table>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
html,body {
height: 100%
}
tr {
height: 2em;
}
table {
background-color: red;
}
html {
background-color: blue;
}

UPDATED
Adding the following CSS rules will lead to the desired effect in Chrome, Opera and Safari, but not on Internet Explorer and Firefox. You need to use extra workaround (e.g. fixing the height of the table dynamically using JavaScript) to handle these browsers:
table {
background-color: red;
height: 100%;
}
table thead {
display: inline-block;
width: 100%;
height: 20px;
}
table tbody {
height: 100%;
display: inline-block;
width: 100%;
overflow-x: hidden;
overflow-y: scroll;
}

How to make a table that looks like this in html or make a tableless one [closed]

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
I have a to present data in html with headers. Below is the image of part of the header which i am struggling with.
I have managed to rotate the text but the problem is there overlap.
This is the code of the whole structure.
<style type="text/css"> .text-rotation {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
height:inherit;
}
</style>
</head>
<body>
<table width="100%" border="1" align="center" cellpadding="3" cellspacing="1">
<tr>
<td rowspan="5"> </td>
<td rowspan="5" align="center" valign="bottom">Code</td>
<td rowspan="5" align="center" valign="bottom">Change</td>
<td rowspan="5" align="center" valign="bottom">Description</td>
<td colspan="6" align="center" bgcolor="#FF6666">STOCK RANGE</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" align="center" bgcolor="#66CC00" >SPHERICAL</td>
<td colspan="2" align="center" bgcolor="#FFCC00" >SPH/CYL-/-</td>
<td colspan="2" align="center" bgcolor="#0066CC">SPH/CYL+/-</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="3" align="center" bgcolor="#66CC00" class="text-rotation">MINUS</td>
<td rowspan="3" align="center" bgcolor="#66CC00" class="text-rotation">PLUS</td>
<td rowspan="3" align="center" bgcolor="#FFCC00" class="text-rotation">MINUS</td>
<td rowspan="3" align="center" bgcolor="#FFCC00" class="text-rotation">PLUS</td>
<td rowspan="3" align="center" bgcolor="#0066CC" class="text-rotation">PLUS</td>
<td rowspan="3" align="center" bgcolor="#0066CC" class="text-rotation">MINUS</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>

A quick mock-up:
<table border="1">
<tr>
<td colspan="6">STOCK RANGE</td>
<td colspan="11">LENS PROPERTIES</td>
</tr>
<tr>
<td colspan ="2">SPHERICAL</td>
<td colspan ="2">SPH/CYL</td>
<td colspan ="2">SPH/CYL</td>
<td rowspan="2">Stock</td>
<td rowspan="2">Disclaimer</td>
<td rowspan="2">Index</td>
<td rowspan="2">UV Coating</td>
<td rowspan="2">FOOBAR</td>
<td rowspan="2">FOOBAR</td>
<td rowspan="2">FOOBAR</td>
<td rowspan="2">FOOBAR</td>
<td rowspan="2">FOOBAR</td>
<td rowspan="2">FOOBAR</td>
<td rowspan="2">FOOBAR</td>
</tr>
<tr>
<td>LEFT1</td>
<td>LEFT2</td>
<td>LEFT3</td>
<td>LEFT4</td>
<td>LEFT4</td>
<td>LEFT5</td>
</tr>
<tr>
<td>DATA_LEFT_1</td>
<td>DATA_LEFT_2</td>
<td>DATA_LEFT_3</td>
<td>DATA_LEFT_4</td>
<td>DATA_LEFT_5</td>
<td>DATA_LEFT_6</td>
<td>DATA_RIGHT_1</td>
<td>DATA_RIGHT_2</td>
<td>DATA_RIGHT_3</td>
<td>DATA_RIGHT_4</td>
<td>DATA_RIGHT_5</td>
<td>DATA_RIGHT_6</td>
<td>DATA_RIGHT_7</td>
<td>DATA_RIGHT_8</td>
<td>DATA_RIGHT_9</td>
<td>DATA_RIGHT_10</td>
<td>DATA_RIGHT_11</td>
</tr>
</table>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
EDIT 2: Some visual of this: jsFiddle
EDIT 3: Some new visuals with the other answer incorporated: jsFiddle.

Rotating an item in non legacy-IE calculates it's properties before rotating the element. This means the whole item and background will be shifted outside the document flow, probably not what you want in a table. Try rotating the cell content, not the cell itself, like so:
.text-rotation > * {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
height:inherit;
}
... and adding a generic display:block wrapper around the cell content ...
<td rowspan="3" align="center" bgcolor="#66CC00" class="text-rotation"><div>MINUS</div></td>
<td rowspan="3" align="center" bgcolor="#66CC00" class="text-rotation"><div>PLUS</div></td>
<td rowspan="3" align="center" bgcolor="#FFCC00" class="text-rotation"><div>MINUS</div></td>
<td rowspan="3" align="center" bgcolor="#FFCC00" class="text-rotation"><div>PLUS</div></td>
<td rowspan="3" align="center" bgcolor="#0066CC" class="text-rotation"><div>PLUS</div></td>
<td rowspan="3" align="center" bgcolor="#0066CC" class="text-rotation"><div>MINUS</div></td>