Wiersz tabeli POKAŻ/UKRYJ * Bez * Zmiana rozmiaru kolumny, w/TableLayout: auto

Question

Mam tabelę z wieloma wierszami, pokazującą przedmioty na sprzedaż. Gdy użytkownik kliknie wiersz, skrypt wstawia/pokazuje nowy wiersz tuż pod nim ze szczegółami o przedmiocie. Problem polega na tym, że długi opis wymusza zmianę szerokości kolumn. To przesuwa pozycje kolumn i jest naprawdę denerwujące, szczególnie dla użytkownika. W tej chwili mam mój table.style.tableLayout: auto. Tak naprawdę wolę to w ten sposób, ponieważ kolumny są dostosowane do treści.

Moje pytanie brzmi: w jaki sposób dynamicznie „lock” szerokości kolumn w moim stole, tak aby po włożeniu/pokazać nowy wiersz, kolumn nie wyregulować/rozmiaru?

Próbowałem:

1. dynamicznie ustawienie tabeli czasowo "TableLayout: stałe"
2. Wstawianie/wykazujące mój nowy wiersz
3. zmieniającą tabelę z powrotem do "TableLayout: auto"

Akcje 1 & 2 działa w FireFox, ale nie w Safari i IE (6 & 7). Jednak wykonanie wszystkich trzech zdaje się uniemożliwiać przesuwanie kolumn.

Frustracja jest nie do zniesienia ... tracąc dużo snu ... proszę o pomoc!

Dzięki.

Answer 1

Można wyświetlić szczegóły rzędzie pod kliknięty jeden w DIV i ustawić jej

style="overflow:auto"; 

tak, że dane będą zawijać i przewijania będzie dostępna, aby wyświetlić cały tekst.

Answer 2

Nie wiem czy you're zaznajomieni z jQuery, ale that's co chciałbym użyć - w połączeniu z oddzielną klasę dla kolumny that's powoduje zmianę rozmiaru w nowym wierszu - do:

1. Oblicz/uzyskać z kolumny
2. Ustawić się z wyżej wymienionych klas
3. Dodaj wiersz

I haven't próbowałem, ale to powinno wystarczyć.

Nawiasem mówiąc, prawdopodobnie istnieją inne sposoby, aby to zrobić, jestem po prostu bardziej zaznajomiony z jquery (dla punktu 1. i 2.).

Answer 3

Chciałbym ustawić procent szerokości na każdej kolumnie po prostu jako przypomnienie. Ustaw go tylko raz na TH każdej kolumny. Przeglądarka w razie potrzeby dostosuje kolumny do treści, ale kolumny będą bardziej spójne.

Następnie nigdy nie wstawiłbym css "white-space: nowrap" na tym stole. Długi opis nie powinien naruszać układu tabeli, powinien być zawijany poprawnie na wielu liniach i być czytelny, jeśli ustawisz szerokość każdej kolumny, aby dostosować ją do rodzaju danych. Podobnie zachowałbym użycie   (niełamliwych spacji) do dat, czasów i liczb i pozwoliłam na zawijanie tekstu.

Poza tym, robię to w mojej pracy na zasadzie dialy, i jest czas, kiedy trzeba zatrzymać włosy, prosząc przeglądarkę, aby zrobiła coś, czego nie zaprojektowano. Treść powinna płynąć i dostosowywać się. Blokowanie szerokości kolumn w pikselach wynosi 99,99999% czasu, który jest złym pomysłem.

PS: Jeśli naprawdę, naprawdę, NAPRAWDĘ potrzebujesz blokować kolumny, jedynym rozwiązaniem, o którym wiem, że działa z CSS2 i we wszystkich przeglądarkach jest użycie obrazów. Można wstawić obraz o wysokiej przezroczystości 1px w każdej kolumnie i zliczając padding komórek (TD), ustaw szerokość piksela na każdym obrazie (IMG) zamiast na kolumnach (TH/TD). Można na przykład ukryć te w TH. Możesz pozostawić obrazy o szerokości 1 piksela i ustawić procent szerokości na TDs, a gdy otworzysz nowy wiersz, otrzymasz szerokość każdej kolumny minus wypełnienie TD i ustawisz ją na odpowiedni IMG. Nie próbowałem! Wiem tylko, że w wielu projektach, nad którymi pracowałem, użyłem małych obrazów gif, aby zablokować na przykład minimalny odstęp między kolumnami.

Answer 4

Dla osób szukających kodu (odbywa się to w jQuery). Zakłada to również, że pierwszy wiersz ma odpowiednie szerokości dla każdej komórki. Dość łatwe zmiany w razie potrzeby.

$('table.class_of_table_to_fix tr:first td').each(function() { 
    $(this).css({'width': $(this).width()+"px"}); 
}); 

Answer 5

Miałem podobny problem, gdy wdrażałem tabelę z grupami, które można było przełączyć. Chciałem, aby początkowy stosunek między kolumnami był taki sam bez ustalania szerokości kolumn. Domyślnie przeglądarka zmieniałaby szerokość w zależności od widoczności wierszy tabeli, co było niepożądane.

Poszedłem do przodu i śledziłem sugestię @ faB stosowania procentów, ale robiąc to za pomocą małego skryptu, który obliczy wartości procentowe tych elementów i zastosuje je po początkowym renderowaniu. Dzięki temu moje kolumny pozostają na tej samej szerokości, nawet jeśli wszystkie wiersze są ukryte.

Oto skrypt, który wykorzystuje jQuery:

(function($){ 

    var lock_widths = function() { 
     var total_width = $('table').innerWidth(); 
     var headers = $('table th'); 
     var leftover = 100; 

     $.each(headers, function(ix, el) { 
      var header = $(el), width; 

      // on the last call use the leftover percentage 
      if (ix == headers.length - 1) { 
       width = leftover; 
      } else { 
       leftover -= width = header.outerWidth()/total_width * 100; 
      } 

      header.css({'width': width + '%'}); 
     }); 
    }; 

    $(document).ready(lock_widths); 

})(jQuery); 

Testowany w IE7 +, Firefox i Chrome. Działa to w moim przypadku specjalnym, ponieważ kolumny mają nagłówek jako odniesienie, ale można je przepisać w celu zmierzenia innych kolumn.