html - 如何在垂直表(转置表)中自动换行标题？

Question

我们正在使用这里描述的响应表:http://dbushell.com/demos/tables/rt_05-01-12.html .

它通过创建一个带有固定左列的垂直表格来转置表格。转置的标题行， 然而，它并没有包裹在空白处，并且不必要地加宽了表格。

For transposing, the trick is to use display: inline-block; on the table rows and white-space: nowrap; on the table body.

在标题行中启用换行的任何解决方案？

JsFiddle 链接:http://jsfiddle.net/ckaodhz1/

上述技巧的代码:

table thead { display: block; float: left; }
table tbody {
    display: block;
    width: auto;
    position: relative;
    overflow-x: auto;
    white-space: nowrap;
}
table thead tr { display: block; }
table th { display: block; }
table tbody tr { display: inline-block; vertical-align: top; }

Answer 1

您可以使用 <th>所有 header 的标记。

然后你可以使用word-wrap: break-word;对于 <th>标签。