javascript - 在 HTML 表 : How To Manage Tables Row Height? 中

Question

一个简单的问题:当表格比屏幕宽(溢出)并且在某些单元格中包含冗长的文本时或 <td> , 那么行高就变得多余了。

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

溢出后:仅向右侧添加单元格后出现问题，使整行和整个表格的高度不必要。 http://jsfiddle.net/w1dc380w/4/

我所有的表格在单元格中都有不同长度的文本，不同的行数和列数。是否有一个单一的解决方案来管理我所有的表(溢出)行高？

我的想法:使用whitespace:nowrap删除空白或使每个单元格成为单行 + 强制每行和每列的最长单元格为正方形或接近正方形将使表格紧凑。

---

对所有行或列或表格都没有用的解决方案:

(1)CSS min-width列或单元格 (2)css width到表 (3)css whitespace:nowrap到 table 上。

因为所有单元格中的文本量不同，表格的宽度、单元格数、行和列也不同。所以这些 CSS 留下了无用的空白，无法使表格尽可能紧凑。

是否有任何方法可以使用或不使用 Javascript 或我认为的更好的方法来解决这个问题？

Answer 1

没有额外的空白解决方案，

在您的情况下，此 jquery 将检查每一行，并增加表格宽度，直到所有行的高度几乎相等。

var i = 0,
    j, row, table = document.getElementsByTagName('table')[0];
while (row = table.rows[i++]) {
    j = 1000;
    while (row.offsetHeight > 200 && j < 2500) {
        j += 500;
        table.style.width = j + 'px';
    }
}