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到表格。

因为所有单元格中都有不同的文本量，所以表格具有不同的宽度，单元格数量，行数和行数。列。因此，这些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';
    }
}

Answer 2

由于JQuery = javascript，我希望你能接受这个：

http://jsfiddle.net/w1dc380w/8/

$( "th,td" ).each(function( index ) {
$( this ).wrapInner( "<div class='wrapper'></div>"); 


});

CSS：

.wrapper {
    width:100px;
    height:100px;
}

简单，我们有时候需要div ...：）

Answer 3

您已将其归类为javascript，因此我假设您可以在此处使用某些脚本。我自己从谷歌和SO尝试了一些CSS解决方案，但不幸的是，许多人都是基于响应的和/或依赖于知道固定宽度 - 不可能的。

因此，我使用 javascript代码段来遍历所有<td>元素，找到哪个元素具有最大高度，然后使用该高度的一半来制作所有{{1}看起来大致正方形。的 Fiddle

<td>

这并不完美，如果每页有多个表（即var greatestHeight = 0; $('td').each(function(index){ if($(this).height() > greatestHeight){ greatestHeight = $(this).height(); } }); $('td').css('min-width', (greatestHeight / 2));），我建议您对每个表进行限定，否则逻辑将在表之间运行。

在HTML表格中：如何管理表格行高？

3 个答案: