Good morning,
First off - let me get this out of the way...the table is holding tabular data.
Now onto what I am trying to do - What I am trying to do is build a table with vertical text along the top row for FF. So far I have succeeded in this, however the issue is that for the longer strings of text using nowrap forces the td larger.
What I've tried to do to correct this, is place divs inside the td elements and relatively position them, then I absolutely position the text.....This does not work. I am wondering if anyone else has some solutions......The example of the code I am using:
td {
width:50px;
}
#headtext {
position:relative;
}
htext {
-moz-transform:rotate(-90deg);
white-space:nowrap;
position:absolute;
top:2;
left:2;<table>
<tr><td><div id="headtext" class="htext">Column1</div></td><td><div id="headtext" class="htext">Column2 but larger</div></td></tr>
<tr><td>d/m/y</td><td>d/m/y</td></tr>
</table>What it appears to be trying to do when the page loads with nowrap (not commented out) is it takes whatever the width of the text would have been and makes the td that wide even though it is still pushing the text vertically - if that makes sense. Without nowrap the td's stay the prescribed 50px in width but the text ends up breaking into multiple lines. This is why I've attempted to make the htext absolute in order to let the tds stay the width I want them and in theory to keep them from messing with the parent element - but as said before it does not seem to work.
My goal is to try and keep the column headers as fluid as possible as they will be imported from a database and depending on the user there may be three columns or there may be twenty.
Your help is appreciated.