如何在垂直表（转置表）中自动换行标题？

Question

我们正在使用此处所述的响应表：http://dbushell.com/demos/tables/rt_05-01-12.html。

通过创建一个带有固定左列的垂直表来转换表。转置的标题行， 但是，没有包裹在空白处并且不必要地扩大了桌子。

  

对于转置，诀窍是在表格行上使用display: inline-block;   桌面上有white-space: nowrap;。

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

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>标记。

然后，您可以将word-wrap: break-word;用于<th>代码。

Answer 2

您可以使用省略号。试试这个

.graham tr td:first-child{
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap;
  width:50px;
}