CSS komórka tabeli równa szerokość


148

Mam nieokreśloną liczbę elementów komórek tabeli w kontenerze tabeli.

<div style="display:table;">
  <div style="display:table-cell;"></div>
  <div style="display:table-cell;"></div>
</div>

Czy istnieje czysty sposób CSS na uzyskanie równej szerokości komórek tabeli, nawet jeśli zawierają one zawartość o różnej wielkości?

Dzięki.

Edycja: posiadanie maksymalnej szerokości wymagałoby wiedzy, ile masz komórek?


Jak jest określana liczba kolumn: po stronie klienta czy serwera?
iambriansreed

Po wypróbowaniu kilku metod, myślę, że jeśli chcesz mieć wiele wierszy i chcesz, aby miały one równą szerokość, użyj flexboksa zamiast tabeli
Eric

Odpowiedzi:


299

Oto działające skrzypce z nieokreśloną liczbą komórek: http://jsfiddle.net/r9yrM/1/

Możesz ustalić szerokość dla każdego rodzica div( tabeli ), w przeciwnym razie będzie to 100% jak zwykle.

Sztuczka polega na użyciu table-layout: fixed;i pewnej szerokości każdej komórki, aby ją wywołać, tutaj 2%. To uruchomi drugi algorytm tabeli, ten, w którym przeglądarki bardzo starają się przestrzegać wskazanych wymiarów.
Przetestuj w przeglądarce Chrome (i IE8 - w razie potrzeby). Jest w porządku z niedawnym Safari, ale nie pamiętam zgodności tej sztuczki z nimi.

CSS (odpowiednie instrukcje):

div {
    display: table;
    width: 250px;
    table-layout: fixed;
}

div > div {
    display: table-cell;
    width: 2%; /* or 100% according to OP comment. See edit about Safari 6 below */
}

EDYCJA (2013): Uważaj na Safari 6 na OS X, ma table-layout: fixed; zły (a może po prostu inny, bardzo różniący się od innych przeglądarek. Nie sprawdzałem układu tabeli CSS2.1 REC;)). Przygotuj się na różne wyniki.


1
Dzięki, to wydaje się być odpowiedzią. Nie wiem dlaczego, ale jeśli ustawię szerokość na 2%, to w rzeczywistości przeskoczy każdą kolumnę do 2%. Ale wydaje się, że 100% działa świetnie. Masz pojęcie, co się tam dzieje?
Harry

3
Natknąłem się na ten sam problem z koniecznością używania 100% szerokości w komórkach tabeli. Działo się tak z powodu poprawek zastosowanych do elementu nadrzędnego z display: table. Ponieważ komórki o szerokości 100% nie działają w IE8, rozwiązaniem dla mnie było usunięcie poprawki clearfix. Mam nadzieję, że to komuś pomoże.
Alex Barrett,

Aby to rozwinąć, działa to w przypadku prostych układów (1x1, 2x2, 3x3 itd.), Ale złożone układy (1x3x1, 1x2x3x4 itd.) Wymagają dodatkowych divs, które display:tablemają być używane tak, jakby były rzędami, a nie display:tabl-rowtak , jak niektórzy mogą się spodziewać. Przykład tutaj .
filoxo

2
100% szerokości nie działało w IE8 (niespodzianka), ale początkowa sugestia dla 2% zapewnia prawidłowe wyniki.

1
100% szerokości również nie działało w IE10. To nie praca w IE11. A 1% szerokości sprawiło, że Mobile Safari wyświetla bardzo wąskie kolumny. Skończyło się na tym, że użyłem hacka CSS na IE9 i IE10: .my-cell { width: 100%; }; @media screen and (min-width:0\0) { .my-cell { width: 1%; } }hack CSS pochodzi stąd: stackoverflow.com/a/24321386/6962
Henrik N

29

HTML

<div class="table">
    <div class="table_cell">Cell-1</div>
    <div class="table_cell">Cell-2 Cell-2 Cell-2 Cell-2Cell-2 Cell-2</div>
    <div class="table_cell">Cell-3Cell-3 Cell-3Cell-3 Cell-3Cell-3</div>
    <div class="table_cell">Cell-4Cell-4Cell-4 Cell-4Cell-4Cell-4 Cell-4Cell-4Cell-4Cell-4</div>
</div>

CSS

.table{
    display:table;
    width:100%;
    table-layout:fixed;
}
.table_cell{
    display:table-cell;
    width:100px;
    border:solid black 1px;
}

PRÓBNY.


Skrzypce tutaj nie działają. Komórki mają zawsze 25%.
netAction

To rozwiązanie nie jest bardzo skalowalne w przypadku niczego dynamicznego, takiego jak nawigacja w witrynie kontrolowana przez klienta.
Eric K

Prawdopodobnie masz rację i przy okazji, ma prawie dwa lata anser @QuantumDynamix. Masz na myśli coś lepszego? Podziel się swoim pomysłem, pokaż światu lepsze rzeczy :-)
Alpha

15

Samo użycie max-width: 0w display: table-cellelemencie zadziałało dla mnie:

.table {
  display: table;
  width: 100%;
}

.table-cell {
  display: table-cell;
  max-width: 0px;
  border: 1px solid gray;
}
<div class="table">
  <div class="table-cell">short</div>
  <div class="table-cell">loooooong</div>
  <div class="table-cell">Veeeeeeery loooooong</div>
</div>


1
Po prostu czepiam się tutaj, ale 0pxto nie jest ważna jednostka. Po prostu powinno być 0.
Gavin

To zadziałało dla mnie, ale czy możesz wyjaśnić, jak to działa?
Emmanual

6

Zastąpić

  <div style="display:table;">
    <div style="display:table-cell;"></div>
    <div style="display:table-cell;"></div>
  </div>

z

  <table>
    <tr><td>content cell1</td></tr>
    <tr><td>content cell1</td></tr>
  </table>

Przyjrzyj się wszystkim problemom związanym z próbami sprawienia, aby elementy div działały jak tabele. Musieli dodać table-xxx, aby naśladować układy tabel

Tabele są obsługiwane i działają bardzo dobrze we wszystkich przeglądarkach. Po co ich porzucić? fakt, że musieli ich naśladować, jest dowodem, że wykonali swoją pracę i dobrze.

Moim zdaniem użyj najlepszego narzędzia do pracy i jeśli chcesz, aby dane tabelaryczne lub coś przypominającego tabele danych tabelarycznych po prostu działało.

Bardzo późna odpowiedź, którą znam, ale warto ją wyrazić.


2
+1, ponieważ działa i ponieważ CSS nadal, w 2014 roku nie robi tego poprawnie we wszystkich przeglądarkach.
Fuj

6
Czasami potrzebujesz układu tabelarycznego dla rzeczy, które nie są danymi tabelarycznymi. np Elementy nawigacyjne, które powinny używać <nav>, <ul>itp
Ben

1
Dla responsywnych idealnym rozwiązaniem jest układ oparty na elementach DIV. Wyświetlanie tabel na urządzeniach mobilnych to wrzód na dupie.
Pablo Rincon

Próba emulacji tabeli wyklucza projektowanie responsywne. Zgadzam się, jeśli chcesz responsywny projekt, stoły nie są dobrym wyborem.
DeveloperChris,

2
Tabele zostały stworzone do wyświetlania danych tabelarycznych: było, jest i będzie to elementy HTML używane do wyświetlania danych tabelarycznych, po co ktoś miałby je porzucić (w tym celu)? Układ tabeli nie jest naśladowany : od jakiegoś czasu jest częścią rekomendacji CSS2 i zdarza się, że domyślny układ tabel HTML jest display: table-etc(całkiem naturalnie). Nie spędzam dni na tworzeniu linków naśladujących elementy div lub div naśladujące tabele, zakresy lub dane wejściowe: po prostu używam CSS do stylizacji. Na koniec, powodzenia z IE9 w stosowaniu dowolnej innej wartości displaywłaściwości do elementów table, tr, td.
FelipeAls

1

to zadziała dla każdego

<table border="your val" cellspacing="your val" cellpadding="your val" role="grid" style="width=100%; table-layout=fixed">
<!-- set the table td element roll attr to gridcell -->
<tr>
<td roll="gridcell"></td>
</tr>
</table>

Będzie to również działać w przypadku danych tabeli utworzonych przez iterację


0

Proszę bardzo:

http://jsfiddle.net/damsarabi/gwAdA/

Nie możesz użyć width: 100px, ponieważ ekran jest typu table-cell. Możesz jednak użyć opcji Max-width: 100px. Twoje pudełko nigdy nie będzie większe niż 100 pikseli. ale musisz dodać przepełnienie: ukryte, aby upewnić się, że kontekt nie przeniknie do innych komórek. możesz także dodać spację: nowrap, jeśli chcesz zapobiec zwiększaniu się wysokości.


0

Można to zrobić, ustawiając styl komórki tabeli na width: auto, a zawartość pustą. Kolumny mają teraz taką samą szerokość, ale nie zawierają treści.

Aby wstawić zawartość do komórki, dodaj za divpomocą css:

position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;

Musisz także dodać position: relativedo komórek.

Teraz możesz umieścić rzeczywistą zawartość w opisanym powyżej div.

https://jsfiddle.net/vensdvvb/

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.