Member Avatar for PixelatedKarma

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.

  • 1 Contributor
  • 2 Replies
  • 116 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by PixelatedKarma

Dani AI

Generated

A few practical ways to stop rotated header text from forcing a table column wider than you want. already tried putting the rotated text inside positioned elements and fiddling with overflow; the issue is the table layout algorithm often measures intrinsic (unrotated) sizes when deciding column widths. Two reliable fixes are: give the table fixed layout (so content does not determine column width), or keep the rotated label truly out of the cell flow by anchoring it to the cell and using the cell as the positioned container.

Example: table-layout fixed + explicit column widths (lets header overflow without changing column size)

table.fixed {
  table-layout: fixed;
  width: 100%;
}
colgroup col { width: 50px; }
.col-label {
  display: inline-block;
  transform: rotate(-90deg);
  transform-origin: left top;
  white-space: nowrap;
}

Example: absolute-positioned header inside a relatively positioned cell (cell stays fixed; label sits visually above it)

td.header-cell {
  position: relative;
  width: 50px;
  vertical-align: bottom;
}
td.header-cell .label {
  position: absolute;
  left: 6px;
  top: 6px;
  transform: rotate(-90deg);
  transform-origin: 0 0;
  white-space: nowrap;
}

Troubleshooting notes:

  • Make sure units are present (e.g., top: 6px) and selectors use . for classes. A missing unit or a wrong selector can make the rule not apply.
  • For dynamic column counts, generate a <colgroup> via script and set per-column widths, or compute a percent width (100% / n) before applying table-layout: fixed.
  • For modern browsers, consider writing-mode: vertical-rl for native vertical text instead of rotation.
  • If text must be clipped, combine overflow: hidden with text-overflow: ellipsis on an unrotated container sized to the column.

These approaches avoid relying on content-based width calculations and keep headers visually vertical without expanding the table.

Member Avatar for PixelatedKarma

Ohhhh and I should add I have tried overflow:hidden;.......doesn't work either.

Member Avatar for PixelatedKarma 
td {
    width:50px;
    }
    #headtext {
    position:relative;
    [B]overflow:visible;[/B]
    }
    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>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.