Set vertical text correctly on table header cells

Question

I'm not sure how do deal with this anymore - please see screenshot:

the table header cell has one style - height: 166px;

then each table cell header contains a span with this style properties

margin-bottom: 10px;
padding: 0 .5em;
writing-mode: tb-rl;
filter: flipv fliph;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
display: block;
font-weight: normal;
text-transform: uppercase;

I also execute this JS code to make them tight:

$("table th span").each ->
  header_height = $(this).outerWidth()  if $(this).outerWidth() > header_height
  $(this).width $(this).height()
  return

$("table th").height header_height

These were my last attempt. Ideally there should be no empty space, if 2 words can fit in one line then they should and everything is centered/aligned.

Answer 1

I have re-created this for you. Next time please include all the relevant HTML and CSS.

To get this to work:

• Set the right min-width on the th to stop the headers from overlapping each other. It needs to be just large enough to contain the longest string of text that you will have in the headers.

• Set the right max-width on the span to contain it inside the th. It should match the height of the th minus any padding.

• You could change the min-width to be smaller on headers that contain less text, if you wanted, by attaching a class to the smaller headers and specifying a smaller min-width for them.

There doesn't seem to be any need to use javascript / jQuery.

Have an example!

CSS

th { 
    background: red; 
    height: 166px;
    min-width: 90px; 
    /* 
      min-width is large enough to stop 
      the longest header text you will have from 
      overlapping when the table is the smallest it will be 
    */
}

th span {
    display: block;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    font-weight: normal;
    text-transform: uppercase;
    max-width: 156px;
    color: #FFF;
    /*
      max-width contains the span and 
      must match the height of the th minus 
      any padding you want 
    */
}

.shorty {
    min-width: 70px;
}

/* 
   You could give a class like this
   to your shorter headers if you wanted 
   maybe apply it with javascript or
   if you use PHP / whatever you could
   apply it to strings of a certain size.
*/

HTML

<table>
    <thead>
    <tr>
        <th><span>This is my really long text</span></th>
        <th class="shorty"><span>Shorty!</span></th>
        <th><span>This is my really long text</span></th>
        <th><span>This is my really long text</span></th>
        <th><span>This is my really long text</span></th>
    </tr>
    </thead>
</table>