表格溢出时奇怪的 HTML 表格行高答案

【问题标题】：Weird HTML Table row height when table is overflow表格溢出时奇怪的 HTML 表格行高
【发布时间】：2015-08-11 08:21:42
【问题描述】：

溢出前的情况1：正常且可接受。 http://jsfiddle.net/mg8869ou/1/

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

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

【问题讨论】：

您的问题是表格试图使自己尽可能窄吗？我不确定是否有解决方案，除了给它一个以像素（或 ems）为单位的明确宽度。或者也许你可以用table-layout:fixed 做点什么。嘿，给每个单元格white-space:nowrap.
我的问题上面不是很清楚吗？
不，除非您对给每个单元格white-space:nowrap 感到满意。

标签： javascript html css html-table

【解决方案1】：

你可以使用这个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";
            }
        }
    }
}

【讨论】：

【解决方案2】：

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

编辑正如Mr Lister 所建议的，您还可以为每个td 赋予whitespace:nowrap 属性。这将确保每个td 都将拉伸到在一行上显示其内容所需的长度。不过，在使用较长的文本时不建议这样做。

【讨论】：

但我需要为我的所有表格（很多）提供单一解决方案，我的所有表格都有完全不同的文本、行数和列数等。您的建议都不起作用。
@feacco 然后whitespace:nowrap 方法的唯一问题是它不适合较长的文本。我在吗？
感谢您的回答，但 min-width 不适用于我的所有表格，因为所有表格都有不同的长度数据，宽度相同，所有表格都有不同的编号。单元格和长度，所以请删除你的答案，这样它就没有答案了，谢谢理解。
@feacco 你能不能至少更好地描述一下你想要什么？目前我的解决方案可以解决您给出的问题，因此只有在您指定更准确的情况下才能给出更好的答案。
结合两件事可以解决这个问题：使用空格：nowrap 删除空格或使每个单元格成为单行 + 强制每行和列的最长单元格为正方形或接近正方形将制作表格紧凑。