Установите вертикальный текст правильно на ячейки заголовка таблицы

Question

Я не уверен, как справиться с этим больше - пожалуйста, смотрите скриншот:

ячейки заголовка таблицы имеет один стиль - высота: 166px;

затем каждый заголовок ячейки таблицы содержит оболочку с этим свойства стиля

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; 

Я также выполнить этот JS-код, чтобы сделать их плотно:

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

$("table th").height header_height 

Это была моя последняя попытка. В идеале не должно быть пустого пространства, если в одной строке может быть помещено 2 слова, а затем все должно быть центрировано/выровнено.

Answer 1

Я воссоздал это для вас. В следующий раз, пожалуйста, включите все соответствующие HTML и CSS.

Чтобы получить эту работу:

• Установите правую min-width на th, чтобы остановить заголовки из перекрывая друг друга. Он должен быть достаточно большим, чтобы содержать самую длинную строку текста, которую вы будете иметь в заголовках.

• Установить max-width на span, чтобы содержать его внутри th. Он должен соответствовать высоте th минус любое заполнение.

• Вы можете поменять min-width на заголовки, содержащие меньше текста, если хотите, путем присоединения класса к меньшим заголовкам и указания для них меньшего min-width.

Невозможно использовать 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>