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



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

994   15  

15 ответов:

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

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

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

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

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

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

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

добавить некоторые из следующих строк-высота: 0px; размер шрифта: 0px; высота: 0px; поля: 0; отступ: 0;

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

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

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

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

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

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

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

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

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

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

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

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

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

пока тип ввода установлен на это, вы можете изменить остальные. Удачи Вам!!

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

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

Я меняю его на overflow: visible;

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

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

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

Comments

    Ничего не найдено.