表列已旋转，但如何定位旋转的单元格。

Question

这是一个简单的表。我希望表格列旋转。这就是为什么我添加了一个类text-flip。它将旋转列数据。但是我想基于列数据宽度（旋转后）更改单元格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>

Answer 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>

Answer 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>

Answer 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>