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

【问题标题】：In HTML Table: How To Manage Tables Row Height?在 HTML 表格中：如何管理表格行高？
【发布时间】：2015-10-27 11:07:47
【问题描述】：

一个简单的问题：当表格比屏幕宽（溢出）并且在某些单元格或<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 或我认为的更好的方法来解决这个问题？

【问题讨论】：

标签： javascript html css html-table

【解决方案1】：

由于 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... :)

【讨论】：

感谢您的尝试，但您看不清楚第 1、第 2、第 3....列的额外宽度或空白？
@feacco，是的，现在我在想......实际上，我意识到我什至无法想象想要的解决方案。 :) 例如，您的想法是什么：两个相邻的单元格（让我们从第一行中取出单元格：编号为 6 -> 一个字符，一行，以及编号为 7 的单元格，带有几行文本）实际上应该看起来如何，旁边彼此？没有空白的“方形外观”是不可能的，对吧？
P.S.也许你实际上不需要桌子......也许你更喜欢这样的结构：desandro.github.io/masonry 不同的宽度/高度，最小的空白，以及，嗯......“几乎是方形的”......就是这样我现在能想到... :)

【解决方案2】：

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

所以我使用 javascript sn-p 循环遍历所有 <td> 元素，找出哪个高度最大，然后使用该高度的一半来制作所有 <td>看起来大致是方形的。 Fiddle

var greatestHeight = 0;

$('td').each(function(index){
    if($(this).height() > greatestHeight){
        greatestHeight = $(this).height();
    }
});

$('td').css('min-width', (greatestHeight / 2));

这并不完美，如果您每页有多个表（即td.firstTable），我建议您对每个表进行限定，否则逻辑将在表之间运行。

【讨论】：

感谢您的尝试，但您看不清楚第 1、第 2、第 3....列的额外宽度或空白？
@feacco 您建议将所有表格单元格设为正方形。这样做，你自然会有额外的空白。我不介意 - 如果元素周围没有空间没有完全填充那个正方形，你就不可能有一个正方形的外观。

【解决方案3】：

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

在您的情况下，此 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';
    }
}

【讨论】：