Question

案例1溢出前：正常且可接受。 http://jsfiddle.net/mg8869ou/1/

案例2溢出后：仅将细胞添加到右侧后出现问题。为整行和整个<table>制作“不必要的”高度。 http://jsfiddle.net/w1dc380w/4/

我所有表格的单个解决方案都有多个单元格冗长的文本？

Answer 1

如果没有为列或总表指定绝对宽度，则假定它不应宽于页面。您的解决方案是为每列赋予指定的宽度（例如min-width:100px - see JSFiddle），或者使用overflow:scroll在表格周围放置一个包装，然后为表格提供一个宽度，使每个列的大小合适（see JSFiddle）。

修改根据Mr Lister的建议，您还可以为每个td whitespace:nowrap媒体资源。这将确保每个td将尽可能多地拉伸以在一行上显示其内容。但是，在使用较长文本时不建议这样做。

Answer 2

你可以使用这个jquery：

for (var i = 0, row; row = document.getElementsByTagName('table')[0].rows[i]; i++) {
    if (row.offsetHeight > 200) {
        document.getElementsByTagName('table')[0].style.width = "1500px";
        if (row.offsetHeight > 200) {
            document.getElementsByTagName('table')[0].style.width = "2000px";
            if (row.offsetHeight > 200) {
                document.getElementsByTagName('table')[0].style.width = "2500px";
            }
        }
    }
}

表溢出时奇怪的HTML表行高

2 个答案: