修改

Question

我正在尝试旋转我的表格标题，使它们垂直排列，但周围的元素最终小于div。就好像是在旋转之前根据div 调整自身大小。

如何根据旋转的div自动调整大小？

.columnHeader { transform: rotate(-90deg); } th { background-color: #f88; }

<table> <tr> <th> <div class="columnHeader">One</div> </th> <th> <div class="columnHeader">Two</div> </th> </tr> <tr> <td>1</td> <td>2</td> </tr> </table>

修改：这个问题因为复制而被关闭，但是这个问题没有很好的答案，所以让我在这里发布一个非常干净的解决方案：

.columnHeader { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; } th { background-color: #f88; } td { text-align: center; }

<table> <tr> <th> <div class="columnHeader">One long heading</div> </th> <th> <div class="columnHeader">Two long headings</div> </th> </tr> <tr> <td>1</td> <td>2</td> </tr> </table>

请注意，“vertical-rl”模式实际上在180度旋转后从左到右。

编辑2 ：感谢那些提供答案的人，但我还没有投票或接受大部分答案，因为，正如我写的那样，他们并没有解决原来如何规模的问题根据旋转文本的元素。他们中的一些人手动调整元素大小，以像素或ems，但当然我可以做到这一点;任何元素的大小都可以手动调整。那不是我要求的;如果不清楚，我可以改写这篇文章的标题。

Answer 1

您可以使用writing-mode

writing-mode CSS属性定义文本行是水平放置还是垂直放置以及块进展的方向。

.columnHeader {
  writing-mode:vertical-lr;
  writing-mode:sideways-lr; /* FF or use transform and vertical-lr*/
}

th {
  background-color: #f88;
  width: 1.2em;/* which means min-width according to the table-layout algorythm.*/
}

<table>
  <tr>
    <th>
      <div class="columnHeader">One of any length</div>
    </th>
    <th>
      <div class="columnHeader">Two</div>
    </th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
</table>

codepen示例https://codepen.io/gc-nomade/pen/EKQKBe

修改

删除而不是，留在这里为信息。 *您可以使用float和一个伪元素和一个垂直%padding来绘制一个正方形来开始宽度。

百分比是根据生成的框的包含块的宽度计算的，即使对于“padding-top”和“padding-bottom”也是如此。如果包含块的宽度取决于此元素，则在CSS 2.1中未定义结果布局。与margin属性不同，padding值的值不能为负值。与margin属性类似，百分比值用于填充属性指的是生成的包含块的宽度。

~~添加否定的margin-right值实际上会将.columHeader的宽度减少为null。~~
~~rotate .columnHeader~~
~~将width添加到th（类似min-width）。~~

.columnHeader {
  transform: rotate(-90deg);
}

th {
  background-color: #f88;
  width: 1.2em;
}

.columnHeader {
  float: left;
  margin-right: -20em;
}

.columnHeader:before {
  content: '';
  float: left;
  padding-top: 105%;
}

<table>
  <tr>
    <th>
      <div class="columnHeader">One of any length</div>
    </th>
    <th>
      <div class="columnHeader">Two</div>
    </th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
</table>

~~codepen示例~~

https://codepen.io/gc-nomade/pen/Cqkig

Answer 2

你可以旋转

th {
  background-color: #f88;
  transform: rotate(-90deg);
}

＆＃13;

table td {
  text-align:center;
}

th {
  background-color: #f88;
  transform: rotate(-90deg);
}

＆＃13;

<table>
  <tr>
    <th>
      <div class="columnHeader">One</div>
    </th>
    <th>
      <div class="columnHeader">Two</div>
    </th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
</table>

＆＃13;

Answer 3

您可以为div添加填充

.columnHeader {
  transform: rotate(-90deg);
  padding: 10px 0;
}

th {
  background-color: #f88;
}

<table>
  <tr>
    <th>
      <div class="columnHeader">One</div>
    </th>
    <th>
      <div class="columnHeader">Two</div>
    </th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
</table>

如何根据旋转文本调整元素大小

3 个答案:

修改