Как я могу скрыть строку таблицы HTML <tr>, чтобы она не занимала места?

Question

Как я могу скрыть строку таблицы HTML <tr> чтобы он не занимал места? У меня есть несколько <tr>настроен на style="display:none;", но они по-прежнему влияют на размер таблицы, а граница таблицы отражает скрытые строки.

Answer 1

Мне бы очень хотелось увидеть стиль вашего TABLE. Например, "граница-коллапс"

Просто предположение, но это может повлиять на то, как отображаются "скрытые" строки.

Answer 2

Можете ли вы включить код? я добавить style="display:none;" в моей строке таблицы все время, и это эффективно скрывает всю строку.

Answer 3

Вы можете установить <tr id="result_tr" style="display: none;"> а затем показать его обратно с помощью JavaScript:

var result_style = document.getElementById('result_tr').style;
result_style.display = 'table-row';

Answer 4

Думаю, я бы добавил к этому потенциально другое решение:

<tr style='visibility:collapse'><td>stuff</td></tr>

Я только что проверил это на Chrome, но ставлю это на <tr> скрывает строку ПЛЮС все ячейки внутри строки по-прежнему вносят вклад в ширину столбцов. Иногда я создаю дополнительную строку в нижней части таблицы, используя только несколько разделителей, которые делают ее так, чтобы определенные столбцы не могли быть меньше определенной ширины, а затем скрываю строку, используя этот метод. (Я знаю, что вы должны быть в состоянии сделать это с другими CSS, но я никогда не получал это работать)

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

Answer 5

Если display: none; не работает, как насчет настройки height: 0; вместо? В сочетании с отрицательным полем (равным или превышающим высоту верхней и нижней границ, если таковые имеются) для дальнейшего удаления элемента? Я не представляю что position: absolute; top: 0; left: -4000px; сработает, но стоит попробовать.

С моей стороны, используя display: none работает отлично.

Answer 6

Вы можете использовать стиль отображения: ни один с tr, чтобы скрыть, и он будет работать со всеми браузерами.

Answer 7

var result_style = document.getElementById('result_tr').style;
result_style.display = '';

отлично работает для меня..

Answer 8

Добавьте некоторые из следующих значений line-height:0px;font-size:0px;height:0px;margin:0;padding:0;

Я забыл, кто это делает. Я думаю, что это высота строки для IE6.

Answer 9

У меня была такая же проблема, я даже добавил style="display: none" в каждую ячейку.

В конце концов я использовал комментарии HTML <!-- [HTML] -->

Answer 10

Это случилось со мной, и я был озадачен, почему. Тогда я заметил, что если я удалил nbsp; у меня было внутри строк, то строки не занимали места.

Answer 11

У меня была точно такая же проблема; Я делаю таблицу лидеров, которая может отображать различные рекорды сложности, нажимая кнопки.

Но повозившись в течение большей части 2 часов, я обнаружил кое-что:

Вы можете использовать этот код, чтобы скрыть нажатием кнопки (JavaScript):

document.getElementById('mytr').style='display:none;';

Показать нажатием кнопки:

document.getElementById('mytr').style='display:table-row;';

Начать скрыто (чтобы вернуться позже нажатием кнопки):

<tr id='mytr'style='display:none;'>

Надеюсь, это помогло!

PS Вы также можете отображать и скрывать заголовки аналогичным образом, только чтобы отображать заголовок, а не писать 'display:table-row;'ты пишешь 'display:table-header;'. Это также можно использовать для преобразования строки в заголовки и заголовков в строки.

Answer 12

HTML:

<input type="checkbox" id="attraction" checked="checked" onchange="updateMap()">poi.attraction</input>

JavaScript:

function updateMap() {
     map.setOptions({'styles': getStyles() });
} 

function getStyles() {
    var styles = [];
    for (var i=0; i < types.length; i++) {
      var style = {};
      var type = types[i];
      var enabled = document.getElementById(type).checked;
      style['featureType'] = 'poi.' + type;
      style['elementType'] = 'labels';
      style['stylers'] = [{'visibility' : (enabled ? 'on' : 'off') }];
      styles.push(style);
    }
    return styles;
}

Answer 13

Вам нужно поставить изменение типа ввода на скрытый, все его функции работают, но его не видно на странице

<input type="hidden" name="" id="" value="">

до тех пор, пока выбран тип входа, вы можете изменить остальные. Удачи!!

Answer 14

У меня была такая же проблема, и я решил проблему. Ранее CSS был переполнен: скрытый; Z-индекс:999999;

Я изменяю это на переполнение: видимый;

Answer 15

position: absolute удалит его из потока макетов и должен решить вашу проблему - элемент останется в DOM, но не повлияет на других.

Answer 16

Вы можете установить

<table>
  <tr style="visibility: hidden"></tr>
</table>