Html 如何在垂直表格（转置表格）中对标题进行换行？

我们正在使用如下所述的响应表：

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

对于转置，技巧是使用

display:inline块在表行和
空白：nowrap

是否有任何解决方案可以在标题行中启用换行

jsiddle链接：

上述技巧的代码：

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

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

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

您可以对所有标题使用
标记

然后你可以使用
wordwrap:break-word
用于
标记。
Hi@pratyush您可以尝试使用单词break:break-word省略号解决方案不会有帮助，因为1。这将需要固定列宽，2。标题名称不明显，因为在省略号的情况下可能会混淆“营业利润”和“营业利润”。