Set vertical text correctly on table header cells

Question

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

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.

Put this in a [jsfiddle](http://www.jsfiddle.net) and put all the CSS and HTML needed to re-create this in your question as well. Much easier to fix when we have all the pieces! — misterManSam, Sep 11 '14 at 04:38
Please include some HTML, context is always helpfull. Are you sure you need `span` and `th`, would not `th` be enough? — Jon P, Sep 11 '14 at 04:42

misterManSam · Accepted Answer · 2014-09-11T05:19:16.147

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!

Screenshot

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>

genius! just a few more if you can still help out - i edited your jsbin: http://jsbin.com/wonoxuvikini/1/edit. Clearly the first cell can show all the text within the cell, by making some of the words share in one line. i cannot expand the cell width anymore as its already wide enough. 2. this is user entered text, so it can have arbitrary length, I tried using overflow: hidden, text-overflow:ellipsis, however both top and bottom part of the text gets cut off. Need only the last part of the text that gets cut off... — David, Sep 12 '14 at 03:26

Set vertical text correctly on table header cells

1 Answers1