当 table 溢出时奇怪的 HTML Table 行高

Question

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

案例 2 溢出后：仅向右侧添加单元格后出现问题。为整行和整行设置 "Unnecessary" 高度 <table>。 http://jsfiddle.net/w1dc380w/4/

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

Answer 1

如果没有为列或总宽度指定绝对宽度 table，则假定它不应比页面宽。您的解决方案是为每一列指定宽度（例如 min-width:100px - see JSFiddle), or to place a wrapper around your table with overflow:scroll and then giving the table a width such that each column is the right size (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";
            }
        }
    }
}

当 table 溢出时奇怪的 HTML Table 行高

Weird HTML Table row height when table is overflow

html

javascript

css

html-table