如何控制包含旋转文本的表标题单元格的宽度？ [英] How can I control the width of a table header cell that contains rotated text?

问题描述

我玩了这个一个小时左右，然后决定我是在我的头，当谈到CSS这样的东西。基本上我试图有一个标题单元格与我的页面上旋转的文本。旋转看起来很简单 - 感谢stackoverflow社区！ - 但列的宽度不适用于我。有没有人有任何提示，以使整体满意度列变得狭窄？

I played around with this for an hour or so before deciding that I was over my head when it comes to CSS stuff like this. Basically I am attempting to have a header cell with rotated text on my page. The rotation seemed to be simple enough--thanks stackoverflow community!--but the width of the column is not working for me. Does anyone have any tips for getting the "Overall Satisfaction" column to be narrow?

目标是为IE，虽然我想喜欢它在大浏览器中工作。

Target is for IE, although I would love to have it work in the big browsers.

你可以看到一些我的剩菜从它弄乱了...每个TH细胞中的DIV，TR的高度等等。我正在努力完成。

You can see some of my leftovers from messing around with it... DIV's in each TH cell, height of the TR, etc. None of that is necessary for what I am trying to accomplish.

旋转文本的整个要点是保存水平不动产，从我看到的，这是不会发生。

The whole point of rotating the text was to save horizontal real estate and from what I am seeing, that is not happening.

这是我的简化尝试：

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

推荐答案

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

You need to apply position absolute to the div so it no longer occupies the horizontal space (the column will auto adjust to the width of the rest of the cells). Then a text-indent to reposition the element within the cell:

.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/

修改：修正

.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/

您可以通过使用条件性评论来应用。

You can apply both through use of conditional comments.

这篇关于如何控制包含旋转文本的表标题单元格的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！