Format table header

Question

I have a table with slanted text in the header row, the only problem is that the text still makes the width of the columns way to large. Is there any way to squish together the table columns so that they are about the width of the select boxes? Or is there a way to place the text there without it in the header and maybe just use a <div> or <p>?

Here is the fiddle I am working with: http://jsfiddle.net/t9Krg/1/

.slanted {

    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);


    white-space:nowrap;
    /*
    display:noblock;
    */
}

The boarders around the header is just to see the extra spacing and will be removed later.

The width of the columns are way to wide, i would like them about the width of the select boxes. — Ryan Erb, Nov 04 '13 at 15:44

score 2 · Accepted Answer · answered Nov 04 '13 at 15:51

If you use absolute positioning, you can place objects on the page anywhere you like. But to keep them positioned correctly relative to the table, you need to apply relative positioning to their parent elements.

So for this markup:

<th class="slanted">
  <div>This is a heading</div>
</th>

Your CSS should look something like this:

.slanted {
  text-align:left;
  position:relative;   
  white-space:nowrap;
}

.slanted div {
  width:12em;
  position:absolute;
  top:4em;
  left:-1em;
  transform: rotate(-45deg);
}

You'll have to tweak the top and left values to get things right, but it shouldn't be too difficult as long as you aren't intending to have line breaks in your labels.

Link to JSFiddle

score 1 · Answer 2 · edited May 23 '17 at 12:13

1

Maybe you could try using text-overflow over the th tags. An example i've found in this answer:

CSS text-overflow in a table cell?

edited May 23 '17 at 12:13

Community

1
1

answered Nov 04 '13 at 15:50

l2mt

550
2
7
20

score 1 · Answer 3 · answered Nov 04 '13 at 15:54

1

Add position fixed to CSS

div{position:fixed;}

You'll have to play around with some of the other stuff, but it would cause the columns to not grow to your content.

http://jsfiddle.net/MathiasaurusRex/t9Krg/4/

answered Nov 04 '13 at 15:54

Mathias Rechtzigel

3,596
1
18
37

Format table header

3 Answers3