Question

所以我必须在我的网站上制作一张桌子。我使用了大量的行跨度和跨度。在其中一个单元格中，我必须以90°旋转文本。这是图表到目前为止的图片。 Table我无法弄清楚CSS中的代码，使单元格自动适应垂直文本的高度。任何人都可以帮我吗？

Answer 1

我不确定是否有办法使用变换做你想做的事。你可能最好改变SELECT财产。它为现代浏览器提供了excellent browser support。

写入模式CSS属性定义文本行是水平放置还是垂直放置，以及块的前进方向。

要使其适用于您的表格单元格，您需要将其更改为内联块。这是一个简短的例子，希望能指出正确的方向（双关语绝对有意）。

＆＃13;

writing-mode

＆＃13;

td { 
  border: 1px solid red;
  padding: 15px;
}

.vertical {
  writing-mode: vertical-lr;
  display: inline-block;
  white-space: nowrap;
}

＆＃13;

Answer 2

你可以尝试一下：

$(function() {
    var header_height = 0;
    $('table th span').each(function() {
        if ($(this).outerWidth() > header_height) header_height = $(this).outerWidth();
    });

    $('table th').height(header_height);
});

table, tr, td, th {
  border: 1px solid #000;
  position: relative;
  padding: 10px;
}

th span {
  transform-origin: 0 50%;
  transform: rotate(-90deg); 
  white-space: nowrap; 
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
      <tr>
          <th><span>Shorter Title</span></th>
          <th><span>Much Much Longer Title</span></th>
      </tr>
</thead>
<tbody>
    <tr>
        <td>Cell</td>
        <td>Cell</td>
    </tr>
</tbody>
</table>

CSS表自动高度与旋转文本

2 个答案: