如何控制包含旋转文本的表格标题单元格的宽度？答案

【问题标题】：How can I control the width of a table header cell that contains rotated text?如何控制包含旋转文本的表格标题单元格的宽度？
【发布时间】：2020-08-04 16:45:50
【问题描述】：

我玩了一个小时左右，然后才决定在涉及到像这样的 CSS 东西时，我已经不知所措了。基本上我试图在我的页面上有一个带有旋转文本的标题单元格。旋转似乎很简单——感谢 stackoverflow 社区！——但列的宽度对我不起作用。有没有人有任何关于缩小“总体满意度”列的提示？

目标是 IE，虽然我希望它在大型浏览器中工作。

你可以看到我弄乱它的一些剩菜......每个 TH 单元格中的 DIV，TR 的高度等。对于我想要完成的事情，这些都不是必需的。

旋转文本的全部目的是为了节省横向空间，而据我所见，这并没有发生。

这是我的简化尝试：

<style>
.rotate {
    padding: 0px 0px 0px 0px;
    margin: 0px;
}
.rotate div {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);

    writing-mode: bt-rl;

    padding: 0px 0px 0px 0px;
    margin: 0px;
    text-align: left;
    vertical-align: top;
}
</style>

<table border=1>
    <thead>
        <tr style="line-height: 200px">
            <th><div>Facility</div></th>
            <th><div>Date</div></th>
            <th><div>Score</div></th>
            <th class="rotate"><div>Overall&nbsp;Satisfaction</div></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Los Angeles</td>
            <td>11/12/2010</td>
            <td>3.5</td>
            <td>2.5</td>
        </tr>
        <tr>
            <td>San Diego</td>
            <td>11/17/2010</td>
            <td>10.0</td>
            <td>10.0</td>
        </tr>
    </tody>
</table>

【问题讨论】：

标签： css

【解决方案1】：

您需要对 div 应用绝对位置，使其不再占据水平空间（该列将自动调整为其余单元格的宽度）。然后是文本缩进来重新定位单元格内的元素：

.rotate div {position: absolute;}

.rotate {

    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    writing-mode: bt-rl;
    text-indent: -3em;
    padding: 0px 0px 0px 0px;
    margin: 0px;
    text-align: left;
    vertical-align: top;
}

http://jsfiddle.net/p4EPd/

编辑：修复ie

.rotate div {
    -webkit-transform: rotate(-90deg) translate(0, 10px);
    -moz-transform: rotate(-90deg)  translate(0, 10px);
    writing-mode: bt-rl;
    padding: 0;
    margin: 0;
    height: 125px;
}

th.rotate {padding-top: 5px;}

http://jsfiddle.net/6Xjvm/

您可以通过使用conditional comments 来申请两者。

【讨论】：

感谢 Duopixel，这肯定会让它在 chrome 中更接近。但是 IE 仍然无法正常工作。任何 IE 特定提示？我看到的是旋转正确发生，但文本的位置不正确。如果我没有标题行高度样式，旋转的文本会覆盖数据行中的数据。即使我确实调整了标题行的高度，文本也不会直接位于相关列的上方。
padding: 0px 0px 0px 0px; 代替 padding:0; 有好处吗？
@ashleedawg 不，这只是作者的原始代码。

【解决方案2】：

只需使用以下 css：

writing-mode: vertical-lr; transform: rotate(180deg);

【讨论】：

【解决方案3】：

在表级css声明中添加table-layout:fixed;这可确保表格列的宽度与您声明的完全一致，无论每个单元格中放置什么图像或文本。

顺便说一句 - 而不是：

.旋转{ 填充：0px 0px 0px 0px；边距：0px； } . 旋转 div { -webkit 转换：旋转（-90 度）； -moz 变换：旋转（-90 度）；写作模式：bt-rl；填充：0px 0px 0px 0px；边距：0px；文本对齐：左；垂直对齐：顶部； }

设施

试试：

。回转 { 显示：块； /* 用于 firefox、safari、chrome 等 */ -webkit 转换：旋转（-90 度）； -moz 变换：旋转（-90 度）； -o-transform: rotate(-90deg);/* 对于 Opera*/ -khtml-transform: rotate(-90deg);/* 对于 Lunix*/ /*代表即*/ 过滤器： progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } 设施

这是更少的代码和简化的方法，解决了 IE 问题。

（对不起上面的答案布局问题）

【讨论】：

【解决方案4】：

这应该是第 2 天的 HTML TABLE 课程，但不是。

css 表格属性：“table-layout:fixed”

【讨论】：