Question

我有一张桌子：

    table.tablesorter {
    border: 1px solid #D9D9D9;


}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
    background-color: #04659D;
    border-bottom: 1px solid #0F5E76;
    border-left: 1px solid #0F5E76;
    font-weight: bold;
    text-align:left;
    padding: 5px 19px 5px 9px;
    color: #fff;
}

表格中的一些文字太大而且正在从页面上删除，我尝试使用word-wrap:break-word;并设置宽度但是没有任何工作文本仍然溢出？

关于我如何解决这个问题的任何提示？

Answer 1

将table元素设为fixed table-layout：

table.tablesorter {
    ...
    table-layout: fixed;
}

从CSS2.1规范（上面链接）：

17.5.2.1固定表格布局

使用此（快速）算法，表格的水平布局不依赖于单元格的内容;它只取决于表的宽度，列的宽度以及边框或单元格间距。

Answer 2

您可能想尝试一下：我在div中添加了一个单词并给它一个固定的宽度加上自动换行，它对我有用：

<div id="test">#DecimalFormat(total/counter)#</div>

#test {
    word-wrap:break-word;
    width:40px;
}

<强> Here is your updated jsfiddle

已编辑：虽然我的建议在上面的演示中完美无缺，但如果它在您的特定情况下不起作用，您可能需要对代码进行一些清理并使用{{1} }作为一种解决方法（即。!important），或尝试添加word-wrap:break-word !important; width:40px !important; - 这也可能有所帮助。

Answer 3

你桌子的标记是什么？也许您的桌子的宽度不够宽或不足以补偿表格单元格的自动调整性质。

Answer 4

您可以为包含太长字词的单元格添加滚动条。

just add the following:

table.tablesorter tbody td {
    max-width: 250px;// you can use any width you like, the scrollbar will show up only when a cell exceeds the max-width.
    overflow-x: auto;
}

另一种选择是使用white-space: normal，请参阅：http://www.w3schools.com/cssref/pr_text_white-space.asp

例如

table.tablesorter tbody td {
    white-space: normal;
}

如果这不能将您的文本包装在单元格中，您应该检查您的来源，看看是否有任何东西会覆盖您的CSS并修复它。

如何适应对于页面显示来说太大的表行？

4 个答案: