表格列旋转但如何定位旋转的单元格。答案

【问题标题】：Table column rotated but how to position the rotated cell.表格列旋转但如何定位旋转的单元格。
【发布时间】：2018-07-12 22:31:35
【问题描述】：

这是一个简单的表格。我希望表格列旋转。这就是为什么我添加了一个类文本翻转。它将旋转列数据。但我想根据列数据宽度（旋转后）更改单元格 1、单元格 2 的宽度。如下图-

这里的列数据大小可能会改变。

body{
  padding-top: 50px;
}
.text-flip{
  transform: rotate(-90deg);
}

<table border="1">
  <tbody>
    <tr>
        <td class="text-flip">Column Data 1</td>
        <td class="text-flip">Column Data 2</td>
        <td class="text-flip">Column Data 3</td>
        <td class="text-flip">Column Data 4</td>
        <td class="text-flip">Column Data 5</td>                           </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
        <td>Cell 5</td>
    </tr>
  </tbody>
</table>

【问题讨论】：

标签： html css

【解决方案1】：

可以结合writing-mode with a rotation实现竖排文字。您还需要将类添加到div 而不是td。

Edge 会将div 的高度视为 100% 宽度，使其占据桌子的整个高度，因此我们可以添加 display: inline-block 以使其仅占用所需的空间.

body{
  padding-top: 50px;
}

.text-flip{
  display: inline-block;
  writing-mode: tb-rl;
  transform: rotate(-180deg);
  white-space: nowrap;
  padding: 10px
}

<table border="1">
  <tbody>
    <tr>
      <td ><div class="text-flip">Column Data 1</div></td>
      <td><div class="text-flip">Column Data 2</div></td>
      <td><div class="text-flip">Column Data 3</div></td>
      <td><div class="text-flip">Column Data 4</div></td>
      <td><div class="text-flip">Column Data 5</div></td>     </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
        <td>Cell 5</td>
    </tr>
  </tbody>
</table>

【讨论】：

但是在edge中柱子的高度（旋转柱子后，它的宽度就是高度）很长。
编辑答案添加display: inline-block for Edge

【解决方案2】：

如果你可以使用 IE/Edge 和 Safari，你可以使用 writing-mode

https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

body{
  padding-top: 50px;
}
.text-flip{
  writing-mode: vertical-lr;
}

<table border="1">
  <tbody>
    <tr>
        <td class="text-flip">Column Data 1</td>
        <td class="text-flip">Column Data 2</td>
        <td class="text-flip">Column Data 3</td>
        <td class="text-flip">Column Data 4</td>
        <td class="text-flip">Column Data 5</td>
    </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
        <td>Cell 5</td>
    </tr>
  </tbody>
</table>

【讨论】：

我会使用sideways-lr。事实上，我正准备把它作为答案发布，直到我发现它只在 FF 中有效。

【解决方案3】：

你可以这样做：-

body{
  padding-top: 50px;
}
.text-flip {
  white-space: nowrap;
  height: 120px;
  vertical-align: bottom;
}
.text-flip > div {
  transform: rotate(-90deg);
  width: 30px;
}
.text-flip > div > span {
  border-bottom: 1px solid #ccc;
  padding: 5px 10px;
}

<table border="1">
  <tbody>
    <tr>
        <td class="text-flip"><div><span>Column Data 1</span></div></td>
        <td class="text-flip"><div><span>Column Data 2</span></div></td>
        <td class="text-flip"><div><span>Column Data 3</span></div></td>
        <td class="text-flip"><div><span>Column Data 4</span></div></td>
        <td class="text-flip"><div><span>Column Data 5</span></div></td>
        </tr>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
        <td>Cell 5</td>
    </tr>
  </tbody>
</table>

【讨论】：