Я хочу отображать повернутый текст в виде заголовков таблицы, используя свойство преобразования CSS. Строка заголовка должна корректировать свою высоту по мере необходимости, но вместо этого повернутый текст просто переполняется:
Мой вопрос в том, как заставить заголовок таблицы расти по мере необходимости? По существу это должно выглядеть так:
Если вы используете псевдоэлемент и вертикальное заполнение, вы можете просто нарисовать квадратную рамку или <td>:
http://jsfiddle.net/qjzwG/319/
.verticalTableHeader {
text-align:center;
white-space:nowrap;
transform-origin:50% 50%;
transform: rotate(90deg);
}
.verticalTableHeader:before {
content:'';
padding-top:110%;/* takes width as reference, + 10% for faking some extra padding */
display:inline-block;
vertical-align:middle;
}
Если вы хотите сохранить <td> небольшой ширины, table-layout:fixed + width может помочь.
http://jsfiddle.net/qjzwG/320/
.verticalTableHeader {
text-align:center;
white-space:nowrap;
transform: rotate(90deg);
}
.verticalTableHeader p {
margin:0 -100% ;
display:inline-block;
}
.verticalTableHeader p:before{
content:'';
width:0;
padding-top:110%;/* takes width as reference, + 10% for faking some extra padding */
display:inline-block;
vertical-align:middle;
}
table {
text-align:center;
table-layout : fixed;
width:150px
}
Если вы хотите, чтобы таблица все еще могла вырастать из ее содержимого, но не из ширины <th>, то использование оболочки с отрицательным полем, отличным от направления/направления документа, может сделать: очевидно, ближайший для ваших потребностей, http://jsfiddle.net/qjzwG/320/
<table border="1">
<tr>
<th class="verticalTableHeader"><p>First</p></th>
<th class="verticalTableHeader"><p>Second-long-header</p></th>
<th class="verticalTableHeader"><p>Third</p></th>
</tr>
.verticalTableHeader {
text-align:center;
white-space:nowrap;
transform: rotate(90deg);
}
.verticalTableHeader p {
margin:0 -999px;/* virtually reduce space needed on width to very little */
display:inline-block;
}
.verticalTableHeader p:before {
content:'';
width:0;
padding-top:110%;
/* takes width as reference, + 10% for faking some extra padding */
display:inline-block;
vertical-align:middle;
}
table {
text-align:center;
}
HTML из демо и базы:
<table border="1">
<tr>
<th class="verticalTableHeader">First</th>
<th class="verticalTableHeader">Second</th>
<th class="verticalTableHeader">Third</th>
</tr>
<tr>
<td>foo</td>
<td>foo</td>
<td>foo</td>
</tr>
<tr>
<td>foo</td>
<td>foo</td>
<td>foo</td>
</tr>
<tr>
<td>foo</td>
<td>foo</td>
<td>foo</td>
</tr>
</table>
Для более старых версий IE вам нужно использовать режим письма (CSS):http://msdn.microsoft.com/en-us/library/ie/ms531187%28v=vs.85%29.aspx
Есть новая (экспериментальная) функция CSS3, которая делает то, что именно: режим записи.
Вы должны применить его к div внутри ячейки таблицы:
.vrt-header th {
writing-mode: vertical-lr;
min-width: 50px; /* for firefox */
}<table class='vrt-header'>
<thead>
<tr>
<th>First</th><th>Second</th><th>Third</th>
</tr>
</thead>
<tbody>
<tr>
<td>foo</td><td>foo</td><td>foo</td>
</tr>
<tr>
<td>foo</td><td>foo</td><td>foo</td>
</tr>
<tr>
<td>foo</td><td>foo</td><td>foo</td>
</tr>
</tbody>
</table>хорошо... Я знаю, что это не лучшее решение, но вы можете исправить его с помощью javascript на стороне клиента. В jQuery это будет выглядеть так:
$(".verticalTableHeader").each(function(){$(this).height($(this).width())})
как для чистого HTML или CSS-решения, я думаю, что это ограничение браузера.
использовать
writing-mode: vertical-lr;
https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
Мне было трудно заставить эти настройки работать согласованно. На всякий случай, если это кому-то поможет, моим решением было создание изображений с вертикальным текстом.