Chcę wiedzieć, jak utworzyć tabelę, w której można dostosować szerokości kolumn. Nie zorientowałem się, jak to zrobić. Jeśli znasz sekretny sos do tej techniki, daj mi znać.Jak utworzyć tabelę HTML z regulowanymi kolumnami?
Uważam, że jest to tak proste, jak przechwytywanie zdarzenia kliknięcia myszą w obszarze na krawędzi nagłówka komórki, a następnie dynamiczna zmiana szerokości kolumny podczas przeciągania myszy.
Koncepcja prosta, kompleksowa realizacja. –
Widżet Yahoo UI (YUI) data table umożliwia zmianę rozmiaru kolumn. Jest publicznie dostępny, ale wciąż w wersji beta, a biblioteka YUI jest dość nieporęczna. Każda implementacja będzie musiała być w języku JavaScript/DHTML, ponieważ domyślne tabele HTML nie mają tego rodzaju możliwości.
Szukasz efektu prognozy lub jest < -> wyświetlać, aby pokazać, aby zmienić rozmiar tabeli?
Brzmi dość prosto. – Vincent
Nie ma prostej odpowiedzi, np. "Użyj jakiejś własności hobo foobar". Odbywa się to za pomocą manipulacji javascript i DOM.
Jeśli chcesz zobaczyć implementację tej funkcji z prototypem, spójrz na numer TableKit.
Jestem pewien, że istnieją implementacje jQuery ... Lubię mój stary dobry prototyp;)
Flexigrid dla jQuery wydaje się całkiem słodki.
Aktualizacja: Zgodnie @ komentarzu Vincenta użycie jest bardzo proste ... zobacz witrynę dla pełnych szczegółów, jednak do najbardziej podstawowych przykład - to skrypt następnie podpiąć funkcjonalność tabeli:
$('#myTableID').flexigrid();
lub z opcjami:
$('.classOfTables').flexigrid({height:'auto',striped:false});
Nie wiem, dlaczego nie została ustawiona jako wybrana odpowiedź, ani dlaczego nie została poddana pod głosowanie więcej, ale jest to naprawdę przydatne. Dzięki! –
Chociaż ta siatka ma regulowane szerokości kolumn, nie odpowiada na pytanie, jak zaimplementować taką funkcjonalność w niestandardowej tabeli. – Vincent
Wydaje się, że Flexgrid jest bardzo nielubiany w tym momencie. Strona internetowa nie działa, github nie był aktualizowany od 2014 r. Itd. –
Dodaj ten CSS, aby kolumna tabeli jest regulacja szerokości ...
th {resize:horizontal; overflow:auto;}
Masz świadomość, że możesz po prostu spojrzeć na kod źródłowy strony w przeglądarce i powie Ci, jak to się robi, prawda? – Mecki
Chociaż mogłem "spojrzeć pod Kimono", poprosiłem o zadanie wyjaśnienia. – minty