css - 在表格标题单元格上正确设置垂直文本

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。

举个例子！

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>