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


105

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.


2
Czy są wielokrotnie pokazywane / ukrywane? A może kiedy są ukryte, czy faktycznie zniknęły na dobre? Ponieważ możesz użyć javascript, aby po prostu usunąć wiersz, a to prawdopodobnie rozwiązałoby problem.
brettkelly

Chcę rozpocząć je jako ukryte, a następnie pokazać je, jeśli użytkownik kliknie przycisk, aby „pokazać więcej”. Kiedy są ukryte, nie chcę, aby zajmowały miejsce w pionie.
MikeN

Miałem ten sam problem, jeśli usuniesz () wiersz za pomocą javascript, nadal zajmuje on trochę miejsca w IE6. nie ma mowy o sucky IE
mkoryak

1
Jakiego typu dokumentu używasz? Zgadzam się, że prosty fakt, że publikujesz w SO z dobrym przedstawicielem, wskazuje, że prawdopodobnie wiesz wystarczająco dużo, aby uniknąć trybu dziwactw ... ale jedyne głupie pytanie to takie, które nie zostało zadane. ... i oczywiście ten o papużkach falistych.
David mówi, że przywróć Monice

1
Właśnie przetestowałem w FF 3.5 i IE8 - oba ukrywają wiersz z wyświetlaczem: brak
17 z 26

Odpowiedzi:


37

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

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


2
Dzięki! To był brakujący styl.
MikeN

100

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


pracował dla mnie. Próbowałem ustawić widoczność: ukryta przed :(
Toadums

Nadal jest odstęp: /
fatuhoku

jak zapobiec zmianie szerokości tabeli podczas wyświetlania
ukrytych

57

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

5
Chłodny! to jest to czego szukałem :)
kmario23

4
Dziękuję Ci!! Ukrywanie się było łatwe, ale sprowadzenie ich z powrotem okazało się problematyczne.
Jaskinia Jefferey

to zmienia szerokość tabeli, robię filtr, w którym wiersze muszą być ukryte na podstawie tego, co jest w polu wyszukiwania
PirateApp

13

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.


1
Działa to w większości nowoczesnych przeglądarek, z godnym uwagi wyjątkiem Safari, która renderuje białe spacje zamiast ukrywać wiersz: developer.mozilla.org/en-US/docs/Web/CSS/visibility
Oscar Scholten

8

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.


4

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.


4

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] -->


4

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


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

działa idealnie dla mnie ..


2

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.


-1

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!!


-3

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;


-3

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

-5

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.


fwiw Myślę, że to świetne rozwiązanie, jeśli chcesz ukryć kolumnę w niektórych konkretnych sytuacjach. dodatkowo dodajopacity: 0
Grapho

-5

Możesz ustawić

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

5
Z visibility: hidden;elementem nadal zajmie przestrzeń, taka jest różnica między właściwościami visibilityidisplay
Dmitry Pashkevich

Użyj w ten sposób<table><tr style="display: none;"><td></td></tr></table>
Sanu,
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.