在 HTML Table 中：如何管理 Table 的行高？

Question

一个简单的问题：当table比屏幕宽（溢出）并且在某些单元格或<td>中包含冗长的文本时，那么行高度将变得不必要。

溢出前：正常和接受table。 http://jsfiddle.net/mg8869ou/1/

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

我的所有 table 单元格中的文本长度、行数和列数都不同。是否有单一的解决方案来管理我所有的 tables(overflow) 行高？

我的想法：使用whitespace:nowrap去除白色-space或使每个单元格单行+强制每行和每列最长的单元格正方形或接近正方形会使 table 紧凑。

解决方案对所有行或列或 tables 没有用：

(1)css min-width 到列或单元格 (2)css width 到 table (3)css whitespace:nowrap 到 table.

因为所有单元格中的文本量不同，所以 tables 具有不同的宽度、单元格数、行数和列数。所以这些 CSS 留下无用的 white-space 并且无法使 table 尽可能紧凑。

有没有 Javascript 或者我认为更好的方法来解决这个问题？

Answer 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...:)

Answer 2

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

所以我使用 javascript 代码片段 遍历所有 <td> 元素，找出哪个元素的高度最大，然后使用其中的一半使所有 <td> 看起来大致呈正方形的高度。 Fiddle

var greatestHeight = 0;

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

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

它并不完美，如果每页超过一个 table（即 td.firstTable），我建议您按 table 限定此条件，否则逻辑运行会在 table 秒之间。

Answer 3

没有额外的白色-space解决方案，

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

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';
    }
}

在 HTML Table 中：如何管理 Table 的行高？

In HTML Table: How To Manage Tables Row Height?

html

javascript

css

html-table