在表头单元格上正确设置垂直文本

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

这是我的最后一次尝试。理想情况下，应该没有空的空间，如果两个单词可以放在一行中，那么它们应该和所有内容都对齐。

Answer 1

我已经为你重新创造了这个。下次请包含所有相关的HTML和CSS。

要使其发挥作用：

• 在min-width上设置右th，以阻止标题相互重叠。它需要足够大才能包含标题中最长的文本字符串。

• 在max-width上设置右span以将其包含在th中。它应匹配th减去任何填充的高度。

• 如果您愿意，可以将min-width更改为包含较少文字的标题，方法是将类附加到较小的标题并为其指定较小的min-width。 / p>

似乎没有必要使用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>