Jak mogę ukryć wiersz tabeli HTML <tr>, aby nie zajmował miejsca?

Jak mogę ukryć wiersz tabeli HTML <tr>, aby nie zajmował miejsca? Mam kilka <tr>ustawionych na style="display:none;", ale nadal mają one wpływ na rozmiar tabeli, a obramowanie tabeli odzwierciedla ukryte wiersze.

Bardzo chciałbym zobaczyć stylizację Twojego stołu. Np. „Border-collapse”

Zgaduję, ale może to wpłynąć na sposób renderowania „ukrytych” wierszy.

Czy możesz dołączyć jakiś kod? style="display:none;"Cały czas dodaję do swojej tabeli wiersze i skutecznie ukrywa cały wiersz.

Możesz ustawić, <tr id="result_tr" style="display: none;">a następnie wyświetlić z powrotem za pomocą JavaScript:

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

Pomyślałem, że dodam do tego potencjalne inne rozwiązanie:

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

Przetestowałem to tylko w Chrome, ale umieszczenie tego w <tr>ukryciu ukrywa wiersz PLUS wszystkie komórki w wierszu nadal mają wpływ na szerokości kolumn. Czasami robię dodatkowy wiersz na dole tabeli z kilkoma odstępnikami, które sprawiają, że niektóre kolumny nie mogą być mniejsze niż określona szerokość, a następnie ukrywam wiersz za pomocą tej metody. (Wiem, że powinieneś być w stanie to zrobić z innymi CSS, ale nigdy nie udało mi się to zadziałać)

Ponownie jestem w środowisku czysto chrome, więc nie mam pojęcia, jak to działa w innych przeglądarkach.

Jeśli display: none;nie zadziała, co powiesz na ustawienie height: 0;zamiast tego? W połączeniu z ujemnym marginesem (równym lub większym niż wysokość górnej i dolnej krawędzi, jeśli istnieje), aby dodatkowo usunąć element? Nie sądzę, position: absolute; top: 0; left: -4000px;żeby to zadziałało, ale może warto spróbować.

Z mojej strony używanie display: nonedziała dobrze.

Dodaj niektóre z następujących wysokości linii: 0px; font-size: 0px; height: 0px; margin: 0; padding: 0;

Zapomniałem, który to robi. Myślę, że to wysokość linii dla IE6.

Miałem ten sam problem, dodałem nawet style = "display: none" do każdej komórki.

W końcu użyłem komentarzy HTML <!-- [HTML] -->

Możesz użyć wyświetlania stylu: brak z tr do ukrycia i będzie działać we wszystkich przeglądarkach.

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

działa idealnie dla mnie ..

Przydarzyło mi się to i byłem zdumiony, dlaczego. Potem zauważyłem, że jeśli usunąłem jakiekolwiek nbsp; miałem w rzędach, wtedy rzędy nie zajmowały miejsca.

Musisz zmienić typ wejścia na ukryty, wszystkie jego funkcje działają, ale nie jest widoczne na stronie

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

Dopóki typ wejścia jest ustawiony na taki, możesz zmienić resztę. Powodzenia!!

Miałem ten sam problem i rozwiązałem go. Wcześniej css był przepełniony: ukryty; indeks z: 999999;

Zmieniam na przepełnienie: widoczne;

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

position: absolute usunie to z przepływu układu i powinno rozwiązać twój problem - element pozostanie w DOM, ale nie wpłynie na inne.

Możesz ustawić

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