HTML Table Solution Максимальный предел высоты для строк или ячеек путем увеличения ширины таблицы, Javascript

Я работаю над очень простым решением Javascript, которое полезно при использовании overflow-x:auto в таблицах скрипт для уменьшения высоты строк путем увеличения ширины таблицы до тех пор, пока строки не уменьшатся до желаемой высоты (я также нашел другие вопросы с той же проблемой высоты).

Теперь для завершения этого сценария осталось только 2 вещи:

  1. Получить и проверить таблицу оптимально для каждой высоты строки (без этого она практически бесполезна)
  2. Упрощение кода, если это возможно.

Мой Javascript (проверяет только определенную строку):

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

}
}
}

Пожалуйста помоги мне с этим...

Я думаю, может быть, есть простой код, который я не знаю, потому что я новичок в javascript, но вы, ребята, можете знать этот простой код...

РЕДАКТИРОВАТЬ: Наконец, это рабочий код, если вы хотите ограничить высоту строк таблицы:

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

ИЛИ ЖЕ

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

1 ответ

Решение

Никто не ответил на этот вопрос, но я сам нашел решение:

Оба будут работать:

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

ИЛИ ЖЕ

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";
            }
        }
    }
}
Другие вопросы по тегам