HTML表格解决方案通过增加表格宽度，Javascript，行或单元格的最大高度限制 [英] HTML Table Solution Max Height Limit For Rows Or Cells By Increasing Table Width, Javascript

问题描述

我正在开发一个非常简单的javascript解决方案，在表格中使用 overflow-x：auto 时非常有用，脚本通过增加表格宽度来减少行高，直到行缩小那个理想的高度，（我也发现了同样高度问题的其他问题）。

I am working on a very simple javascript solution which is useful when using overflow-x:auto in tables, script to decrease rows height by increasing table width until rows shrink that desirable height, (i also found other questions with same height problem).

现在只剩下2件事来完成这个剧本了：

Now only 2 things are left to complete this script:

1. 获取并检查表格每行高度最佳方式（没有它几乎没用）


2. 代码简化如果可能。

我的Javascript（仅检查特定行）：

My Javascript (only checks for a specific row) :

var h = document.getElementsByTagName('table')[0].rows[1].offsetHeight;
if (h > 200) {
document.getElementsByTagName('table')[0].style.width = "2000px";


var h = document.getElementsByTagName('table')[0].rows[1].offsetHeight;
if (h > 200) {
document.getElementsByTagName('table')[0].style.width = "3000px";


var h = document.getElementsByTagName('table')[0].rows[1].offsetHeight;
if (h > 200) {
document.getElementsByTagName('table')[0].style.width = "4000px";

}
}
}

请帮助我在这... ...

Please help me on this...

我想也许有一个简单的代码，我不知道，因为我是javascript初学者，但你们可能知道这个简单的代码...

I think maybe there a simple code which i dont know because i am beginner in javascript, but you guys may know that simple code...

编辑：如果你想限制表行高度，最后这是工作代码：

Finally this is working code if you want to limit table rows height:

var i = 0, row, table = document.getElementsByTagName('table')[0], j = table.offsetWidth;
while (row = table.rows[i++]) {
    while (row.offsetHeight > 160 && j < 4000) {
        j += 300;
        table.style.width = j + 'px';
    }
}

OR

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

推荐答案

没有人回答这个问题，但我自己找到了解决方案：

No one Answered this question but i found the solution myself:

两者都有效：

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

OR

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

这篇关于HTML表格解决方案通过增加表格宽度，Javascript，行或单元格的最大高度限制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！