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。

要让它工作:

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

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

• 如果需要，您可以将包含较少文本的 header 的 min-width 更改得更小，方法是将类附加到较小的 header 并指定较小的 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>