Как я могу контролировать ширину ячейки заголовка таблицы, которая содержит повернутый текст?

Я играл с этим в течение часа или около того, прежде чем решить, что я над головой, когда речь заходит о таких вещах CSS. В основном я пытаюсь иметь ячейку заголовка с повернутым текстом на моей странице. Вращение, казалось, было достаточно простым - спасибо сообществу stackoverflow! - но ширина столбца для меня не работает. У кого-нибудь есть советы по получению колонки "Удовлетворенность", чтобы быть узким?

Цель для IE, хотя мне бы хотелось, чтобы она работала в больших браузерах.

Вы можете увидеть некоторые из моих остатков от общения с ним... DIV в каждой клетке TH, высоте 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>

Ответ 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/

Изменить: исправить, т.е.

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

Вы можете применять оба варианта: условные комментарии.

Ответ 2

В табличном уровне объявление css добавить table-layout: fixed; Это гарантирует, что ширина столбцов таблиц остается в точности, как вы заявляете, независимо от того, какие изображения или текст ролик в каждой ячейке.

Кстати, вместо:

.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;
}

<th><div>Facility</div></th>

попробовать:

.rotation {
    display:block;
    /* for firefox, safari, chrome, etc. */
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);/* For Opera*/
    -khtml-transform: rotate(-90deg);/* For Lunix*/
    /* for ie */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
<th>Facility</th>

который меньше кода и упрощенного подхода и решает проблемы IE.

(Извините за проблему с макетом ответа выше)

Ответ 3

Это должен быть урок HTML TABLE Day 2, но это не так.

Свойство css table: "table-layout: fixed"