Jak ustawić <table>
100% szerokości i umieścić tylko wewnątrz <tbody>
pionowego przewijania dla pewnej wysokości?
table {
width: 100%;
display:block;
}
thead {
display: inline-block;
width: 100%;
height: 20px;
}
tbody {
height: 200px;
display: inline-block;
width: 100%;
overflow: auto;
}
<table>
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
<th>Head 4</th>
<th>Head 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
<td>Content 5</td>
</tr>
</tbody>
</table>
Chcę uniknąć dodawania dodatkowego div, wszystko czego chcę to prosta tabela, a kiedy próbuję zmienić wyświetlanie table-layout
, position
i wiele innych rzeczy w tabeli CSS nie działa dobrze przy 100% szerokości tylko ze stałą szerokością w px.
html
css
vertical-scrolling
Marko S.
źródło
źródło
Odpowiedzi:
Aby umożliwić
<tbody>
przewijanie elementu, musimy zmienić sposób jego wyświetlania na stronie, np. Używając godisplay: block;
do wyświetlania jako elementu na poziomie bloku.Ponieważ zmieniamy
display
właściwośćtbody
, powinniśmy również zmienić tę właściwość dlathead
elementu, aby zapobiec uszkodzeniu układu tabeli.Więc mamy:
Przeglądarki internetowe domyślnie wyświetlają elementy
thead
itbody
jako grupę wierszy (table-header-group
itable-row-group
).Gdy to zmienimy,
tr
elementy wewnętrzne nie zajmują całej przestrzeni pojemnika.Aby to naprawić, musimy obliczyć szerokość
tbody
kolumn i zastosować odpowiednią wartość dothead
kolumn za pomocą JavaScript.Automatyczne kolumny szerokości
Oto wersja powyższej logiki jQuery:
A oto dane wyjściowe (w systemie Windows 7 Chrome 32) :
DEMO ROBOCZE .
Tabela pełnej szerokości, kolumny o względnej szerokości
W miarę potrzeby Plakat oryginalny możemy rozszerzyć
table
do 100%width
jego kontenera, a następnie użyć wartości względnej ( Procent )width
dla każdej kolumny tabeli.Ponieważ tabela ma (w pewnym sensie) układ płynów , powinniśmy dostosować szerokość
thead
kolumn przy zmianie rozmiaru pojemnika.Dlatego po zmianie rozmiaru okna powinniśmy ustawić szerokość kolumn:
Dane wyjściowe będą:
DEMO ROBOCZE .
Obsługa przeglądarki i alternatywy
Testowałem dwie powyższe metody w systemie Windows 7 za pomocą nowych wersji głównych przeglądarek internetowych (w tym IE10 +) i działało.
Jednak nie działa poprawnie na IE9 i niższych.
Jest tak, ponieważ w układzie tabeli wszystkie elementy powinny mieć te same właściwości strukturalne.
Poprzez zastosowanie
display: block;
dla<thead>
i<tbody>
elementów, mamy złamane strukturę tabeli.Przeprojektowanie układu za pomocą JavaScript
Jednym z podejść jest przeprojektowanie (całego) układu tabeli. Korzystanie z JavaScript do tworzenia nowego układu w locie oraz dynamiczne obsługiwanie i / lub dostosowywanie szerokości / wysokości komórek.
Na przykład spójrz na następujące przykłady:
Tabele zagnieżdżone
To podejście wykorzystuje dwie zagnieżdżone tabele z zawierającym div. Pierwsza
table
ma tylko jedną komórkę, która madiv
, a druga tabela jest umieszczona wewnątrz tegodiv
elementu.Sprawdź pionowe tabele przewijania w CSS Play .
Działa to w większości przeglądarek internetowych. Powyższą logikę możemy również wykonać dynamicznie za pomocą JavaScript.
Tabela ze stałym nagłówkiem przy przewijaniu
Ponieważ w celu dodania pionowy pasek przewijania do
<tbody>
jest wyświetlający tabeli nagłówek na górze każdego wiersza, moglibyśmy umieścić tenthead
element, do pobytufixed
w górnej części ekranu, zamiast.Oto robocza demonstracja tego podejścia wykonana przez Juliena .
Ma obiecującą obsługę przeglądarki internetowej.
I tutaj czystym CSS wdrożenie przez Willem Van Bockstal .
Rozwiązanie Pure CSS
Oto stara odpowiedź. Oczywiście dodałem nową metodę i dopracowałem deklaracje CSS.
Tabela ze stałą szerokością
W takim przypadku
table
powinien mieć staływidth
(w tym sumę szerokości kolumn i szerokość pionowego paska przewijania) .Każda kolumna powinna mieć swoisty szerokość i ostatnia kolumna z
thead
elementu potrzebuje większą szerokość , która jest równa innych width + szerokości pionowego przewijania bar.Dlatego CSS byłby:
Oto wynik:
DEMO ROBOCZE .
Stół o 100% szerokości
W tym podejściu,
table
ma szerokość100%
i dla każdegoth
, atd
wartośćwidth
nieruchomości powinna być mniejsza niż100% / number of cols
.Ponadto, musimy zmniejszyć szerokość od
thead
jak wartość szerokości pionowego przewijania bar.Aby to zrobić, musimy użyć
calc()
funkcji CSS3 w następujący sposób:Oto demo online .
Uwaga: Podejście to nie powiedzie się, jeśli zawartość każdej kolumny łamie linię, tj . Zawartość każdej komórki powinna być wystarczająco krótka .
Poniżej znajdują się dwa proste przykłady czystego rozwiązania CSS, które stworzyłem w momencie, gdy odpowiedziałem na to pytanie.
Oto jsFiddle Demo v2 .
Stara wersja: jsFiddle Demo v1
źródło
display: block
tobą tracisz właściwości tabeli jako szerokość kolumny dzieloną między thead i tbody. Wiem, że naprawiłeś to przez ustawienie,width: 19.2%
ale jeśli nie znamy z góry szerokości każdej kolumny, to nie zadziała.height: 100%
(gdy chcesz, aby tabela rozszerzyła się na dół strony).ng-repeat
tabelami AngularJS . Nie jestem pewien, dlaczego są te wszystkie biblioteki z ustalonymi nagłówkami tabel, a co nie, gdy jest takie rozwiązanie.box-sizing
właściwości, aby granice dwóch różnych grubości nie odrzucały wyrównania kolumny.W poniższym rozwiązaniu tabela zajmuje 100% kontenera nadrzędnego, nie są wymagane bezwzględne rozmiary. Jest to czysty CSS, używany jest układ elastyczny.
Oto jak to wygląda:
Możliwe wady:
HTML (skrócony):
CSS, z niektórymi dekoracjami pominiętymi dla jasności:
pełny kod na jsfiddle
Ten sam kod w LESS, dzięki czemu możesz go mieszać:
źródło
td
powinno pomócW nowoczesnych przeglądarkach możesz po prostu użyć css:
źródło
<table>
z<div>
którym maoverflow-y: auto;
, a niektóremax-height
. Na przykład:<div style="overflow-y: auto; max-height: 400px;"><table>...</table></div>
Używam
display:block
dlathead
itbody
. Z tego powodu szerokośćthead
kolumn różni się od szerokościtbody
kolumn.Aby to naprawić, używam małego
jQuery
kodu, ale można to zrobićJavaScript
tylko w.Oto moje działające demo: http://jsfiddle.net/gavroche/N7LEF/
Nie działa w IE 8
Pokaż fragment kodu
źródło
colNumber
zmienna może zostać zastąpiona kodem, który iteruje się zamiast znalezionych komórek, i należy pamiętać, że nie radzi sobie poprawnie, jeśli są jakieścolspan
s (w razie potrzeby można również poprawić kod, ale mało prawdopodobne, aby tego rodzaju tabela prawdopodobnie chce tej funkcji przewijania).Tylko CSS
dla Chrome, Firefox, Edge (i innych Evergreen przeglądarek )
Po prostu
position: sticky; top: 0;
twojeth
elementy:PS: jeśli potrzebujesz granic dla elementów TH
th {box-shadow: 1px 1px 0 #000; border-top: 0;}
, pomoże (ponieważ domyślne obramowania nie są poprawnie malowane na przewijaniu).Dla wariantu powyższego, który wykorzystuje tylko trochę JS w celu dostosowania do IE11 zobacz tę odpowiedź https://stackoverflow.com/a/47923622/383904
źródło
separate
dodajesz olej do ognia. jsfiddle.net/RokoCB/o0zL4xyw i zobacz rozwiązanie TUTAJ: dodaj granice do ustalonego TH - nie mogę się doczekać sugestii OFC, jeśli coś przegapięUtwórz dwie tabele jedna po drugiej, umieść drugą tabelę w div o stałej wysokości i ustaw właściwość overflow na auto. Również wszystkie td wewnątrz thead w drugim stole są puste.
źródło
W końcu udało mi się to z czystym CSS, wykonując następujące instrukcje:
http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/
Pierwszym krokiem jest ustawienie
<tbody>
wyświetlania: blok, aby można było zastosować przelew i wysokość. Stamtąd<thead>
należy ustawić rzędy w pozycji: krewny i display: blok, aby usiadły na przewijanym teraz<tbody>
.tbody, thead { display: block; overflow-y: auto; }
Ponieważ
<thead>
pozycja jest względnie ustawiona, każda komórka tabeli potrzebuje wyraźnej szerokościAle niestety to nie wystarczy. Gdy pasek przewijania jest obecny, przeglądarki przydzielają mu miejsce, dlatego w
<tbody>
efekcie ma mniej miejsca niż<thead>
. Zwróć uwagę na niewielkie przesunięcie, które to powoduje ...Jedynym obejściem, jakie mogłem wymyślić, było ustawienie minimalnej szerokości dla wszystkich kolumn oprócz ostatniej.
Cały przykład codepen poniżej:
CSS:
HTML:
EDYCJA: Alternatywne rozwiązanie dla szerokości stołu 100% (powyżej faktycznie dotyczy stałej szerokości i nie odpowiedział na pytanie):
HTML:
CSS:
Demo: http://codepen.io/anon/pen/bNJeLO
źródło
Obejście css dla wymuszania poprawnego wyświetlania kolumn przy pomocy „bloku”
To rozwiązanie nadal wymaga
th
obliczenia i ustawienia szerokości przez jQueryI Jquery / JavaScript
źródło
wypróbuj poniższe podejście, bardzo proste łatwe do wdrożenia
Poniżej znajduje się link jsfiddle
http://jsfiddle.net/v2t2k8ke/2/
HTML:
CSS:
Jquery:
źródło
Dodanie stałej szerokości do td, th po tym, jak blok wyświetlania tbody & thead działa idealnie, a także możemy użyć slimscroll wtyczki aby pasek przewijania był piękny.
źródło
Oto kod, który działa dla mnie, aby stworzyć lepką teadę na stole z przewijalnym ciałem:
źródło
Aby użyć opcji „przepełnienie: przewiń”, należy ustawić opcję „display: block” na urządzeniu thead i tbody. I to miesza szerokości kolumn między nimi. Ale potem możesz sklonować wiersz thead za pomocą Javascript i wkleić go w tbody jako ukryty wiersz, aby zachować dokładne szerokości kolumn.
http://jsfiddle.net/Julesezaar/mup0c5hk/
CSS:
źródło
Spróbuj tego jsfiddle . Wykorzystuje jQuery i jest odpowiedzią Hashem Qolami. Najpierw ułóż zwykły stół, a następnie przewiń.
źródło