Ustaw stałą szerokość kolumny tabeli niezależnie od ilości tekstu w jej komórkach?

535

W mojej tabeli ustawiam szerokość pierwszej komórki w kolumnie 100px.
Jednak gdy tekst w jednej z komórek w tej kolumnie jest za długi, szerokość kolumny staje się większa niż 100px. Jak mogę wyłączyć to rozszerzenie?

Misza Moroszko
źródło
5
stackoverflow.com/questions/1258416/word-wrap-in-a-html-table może pomóc we właściwym kierunku
justinl
2
W moim przypadku nie nastąpiła ekspansja, ale wręcz przeciwnie: niechciane zmniejszenie szerokości pomimo mojej wyraźnej deklaracji szerokości. Śmieszny!
Csaba Toth,
Jedynym poprawnym rozwiązaniem jest użycie colgroup z cols i ustawienie szerokości cols.
MightyPork,
table-layout:fixed;jest rozwiązaniem
emfi

Odpowiedzi:

607

Bawiłem się nim przez chwilę, ponieważ miałem problemy z rozgryzieniem.

Trzeba ustawić szerokość komórki (albo thczy tdpracował, ustawić oba) i ustawić table-layoutsię fixed. Z jakiegoś powodu szerokość komórki wydaje się pozostać stała tylko wtedy, gdy ustawiona jest również szerokość tabeli (myślę, że to głupie, ale whatev).

Przydatne jest również ustawienie tej overflowwłaściwości, hiddenaby zapobiec wyjściu dodatkowego tekstu z tabeli.

Powinieneś również zostawić całą granicę i rozmiar CSS.

Ok, oto co mam:

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 200px;
}

th,
td {
  border: 1px solid black;
  width: 100px;
  overflow: hidden;
}
<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

Tutaj jest w JSFiddle

Ten facet miał podobny problem: szerokości komórek tabeli - ustalanie szerokości, zawijanie / obcinanie długich słów

ptpaterson
źródło
77
Należy to zauważyć: „Przeglądarka ustawi następnie szerokość kolumn na podstawie szerokości komórek w pierwszym rzędzie tabeli”, z stackoverflow.com/questions/570154/...
daniloquio
12
Działa, gdy szerokość stołu nie jest stała. jsfiddle.net/lavinski/CGCFW/3 Potrzebujesz tylko dynamicznego wiersza, aby zająć pozostałe miejsce.
Daniel Little
2
@DanielLittle alternatywnie możesz ustawić szerokość tabeli na 1px; w overflow: visibleprzypadku tabel o dynamicznym rozmiarze, o ile rozmiar komórek jest stały i widoczny jest przepełnienie, nie ma znaczenia, czy rozmiar samej tabeli jest większy czy mniejszy niż rzeczywiste komórki.
Mahn
Co możesz zrobić, jeśli twój td ma „szerokość = 30%;”?
71GA
Dodaj przepełnienie: ukryte @ RokoC.Buljan
Alex Grande
177

Zobacz: http://www.html5-tutorials.org/tables/changing-column-width/

Po znaczniku table użyj elementu col. nie potrzebujesz tagu zamykającego.

Na przykład, jeśli masz trzy kolumny:

<table>
  <colgroup>
    <col style="width:40%">
    <col style="width:30%">
    <col style="width:30%">
  </colgroup>  
  <tbody>
    ...
  </tbody>
</table>
Hyathin
źródło
25
To! To jest odpowiedź HTML5 i to dziwactwo działa bez mojej potrzeby przeskakiwania przez głupie obręcze. Dodatkowo możesz zamiast tego użyć <col class = "someClassName">, aby zachować szerokość w CSS i nie zanieczyszczać swojego HTML informacjami o stylu.
John Munsch,
2
@Sam mogłeś mieć jakiś inny problem zastępujący ten, taki jak CSS, styl wbudowany lub niepoprawny typ dokumentu itp. To zdecydowanie działa, jest to standardowy sposób ustawiania stylów kolumn.
Sameer Alibhai,
Nie jestem pewien, czy to w ogóle „sposób HTML5”. Wygląda na to, że colgroup / col w html5 jest naprawdę używany tylko do oznaczania zakresów. MDN nie wspomina o użyciu atrybutu style w znacznikach col (innych niż dziedziczy go po atrybutach globalnych) i mówi tylko o bgcolor: „... użyj właściwości CSS ... na odpowiednich elementach <td>”. developer.mozilla.org/en-US/docs/Web/HTML/Element/col .
Stephen Panzer
5
Pracował dla mnie ze stylem stołu table-layout: fixed; width: 100%;. Dzięki!
nrodic
Nie jest to ostateczne / ostateczne, ale w3schools również nie wspomina o użyciu coldo tego. Sugeruje użycie css zastosowanego do <td>(lub <th>) - w3schools.com/tags/att_td_width.asp
Don Cheadle
128

Wystarczy dodać <div>znacznik do środka <td>lub <th>zdefiniować szerokość wewnątrz <div>. To ci pomoże. Nic innego nie działa.

na przykład.

<td><div style="width: 50px" >...............</div></td>
KAsun
źródło
2
Połączyłem to rozwiązanie z określeniem minimalnej szerokości / maksymalnej szerokości dla tych samych szerokości pikseli, aby być po bezpiecznej stronie. Wreszcie działa. Nie wiem, dlaczego muszę przeprowadzić te wszystkie dodatkowe rundy, żeby to naprawdę naprawiono, śmieszne ...
Csaba Toth
1
Nie jestem pewien, jak to jest lepsze niż ustawienie tego samego css style="width: 50px"na<td>
Don Cheadle
2
@mmcrae Jest lepiej, ponieważ działa, ustawienie szerokości <td>nie.
Madbreaks,
66

Jeśli potrzebujesz jednej lub więcej kolumn o stałej szerokości, podczas gdy inne kolumny powinny zmienić rozmiar, spróbuj ustawić obie min-widthi max-widthtę samą wartość.

scrrr
źródło
To działało dla mnie, gdy jawne ustawienie szerokości table-layout: fixed;nie działało .
Jordan Mack
cholera jasna! Żadne z pozostałych rozwiązań nie działało ani nie było zbyt niezgrabne! To działało idealnie! Nie wymaga też div!
NeilRoy
29

Musisz to zapisać w odpowiednim CSS

table-layout:fixed;
Vinoth Kumar
źródło
lepszy sorround stół z tagami div niż wewnątrz div użyj przelewu: auto
vinoth kumar
Pracowałem dla mnie, gdy połączyłem go z grupami kolumn: <table style = "table-layout: fixed"> <colgroup> <col style = "width: 50%"> <col style = "width: 50%"> </ colgroup> <tbody> ... </tbody> </table>.
Russ Bateman,
Ten artykuł Chrisa Coyera dobrze to wyjaśnia: css-tricks.com/fixing-tables-long-strings
cssyphus
24

To co robię to:

  1. Ustaw szerokość td:

    <td width="200" height="50"><!--blaBlaBla Contents here--></td>
  2. Ustaw szerokość td za pomocą CSS:

    <td style="width:200px; height:50px;">
  3. Ustaw szerokość ponownie jako maks. I min za pomocą CSS:

    <td style="max-width:200px; min-width:200px; max-height:50px; min-height:50px; width:200px; height:50px;">

Brzmi trochę powtarzalnie, ale daje mi pożądany efekt. Aby to osiągnąć z łatwością, może być konieczne umieszczenie wartości CSS w klasie w arkuszu stylów:

.td_size {    
  width:200px; 
  height:50px;
  max-width:200px;
  min-width:200px; 
  max-height:50px; 
  min-height:50px;
  **overflow:hidden;** /*(Optional)This might be useful for some overflow contents*/   
}

następnie:

<td class="td_size">

Umieść atrybut klasy w dowolnym miejscu <td>.

ErickBest
źródło
To było jedyne rozwiązanie, które wydawało się działać we wszystkich przypadkach bez nakładania dodatkowych, potencjalnie niepożądanych ograniczeń.
Sam
3

Użyłem tego

.app_downloads_table tr td:first-child {
    width: 75%;
}

.app_downloads_table tr td:last-child {
    text-align: center;
}
Svetoslav Marinov
źródło
Nie zapomnij o ntch-child (2) (lub 3, 4 itd.)
table td nth-child (n + 1) {...} obejmie wszystkie oprócz pierwszej kolumny
Ed Randall
2

Jeśli nie chcesz mieć stałego układu, określ klasę odpowiedniego rozmiaru kolumny.

CSS:

.special_column { width: 120px; }

HTML:

<td class="special_column">...</td>
McDado
źródło
2

Pomaga także wstawić ostatnią „komórkę wypełniającą” o szerokości: auto . Spowoduje to zajęcie pozostałej przestrzeni i pozostawi wszystkie pozostałe wymiary, jak określono.

Mitja Gustin
źródło
2

Spraw, aby zaakceptowana odpowiedź reagowała na małe ekrany, gdy są mniejsze niż stała szerokość.

HTML:

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

CSS

table{
    border: 1px solid black;
    table-layout: fixed;
    max-width: 600px;
    width: 100%;
}

th, td {
    border: 1px solid black;
    overflow: hidden;
    max-width: 300px;
    width: 100%;
}

JS Fiddle

https://jsfiddle.net/w9s3ebzt/

Willy Richardson
źródło
2

Ustawienie to:

style="min-width:100px;" 

Pracował dla mnie.

Priyanka Arora
źródło
1

KAsun ma właściwy pomysł. Oto poprawny kod ...

<style type="text/css">
  th.first-col > div, 
  td.first-col > div {
    overflow:hidden;
    white-space:nowrap;
    width:100px
  }
</style>

<table>
  <thead><tr><th class="first-col"><div>really long header</div></th></tr></thead>
  <tbody><tr><td class="first-col"><div>really long text</div></td></tr></tbody>
</table>
Aaron Averill
źródło
1

Zgodnie z moją odpowiedzią tutaj można również użyć nagłówka tabeli (który może być pusty) i zastosować względne szerokości dla każdej komórki nagłówka tabeli. Szerokość wszystkich komórek w treści tabeli będzie zgodna z szerokością ich nagłówka kolumny. Przykład:

HTML

<table>
  <thead>
    <tr>
      <th width="5%"></th>
      <th width="70%"></th>
      <th width="15%"></th>
      <th width="10%"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Some text...</td>
      <td>May 2018</td>
      <td>Edit</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Another text...</td>
      <td>April 2018</td>
      <td>Edit</td>
    </tr>
  </tbody>
</table>

CSS

table {
  width: 600px;
  border-collapse: collapse;
}

td {
  border: 1px solid #999999;
}

Zobaczyć wynik

Alternatywnie, użyj colgroupzgodnie z sugestią zawartą w odpowiedzi Hyathina.

eicksl
źródło
0

W komórce używam elementu :: after, w którym chcę ustawić minimalną szerokość niezależnie od tekstu, tak jak poniżej:

.cell::after {
    content: "";
    width: 20px;
    display: block;
}

Nie muszę ustawiać szerokości nadrzędnego tabeli ani używać układu tabeli.

Dan Macák
źródło
-4

Odkryłem, że odpowiedź KAsun działa lepiej przy użyciu vw zamiast px, tak:

<td><div style="width: 10vw" >...............</div></td>

To była jedyna stylizacja, której potrzebowałem, aby dostosować szerokość kolumny

użytkownik3229980
źródło
-5

Nie trzeba ustawiać "fixed"- wystarczy ustawić, overflow:hiddenponieważ szerokość kolumny jest ustawiona.

Vladimír Hála
źródło
3
Co ukryje zawartość poza granicami komórki, co nie jest dobrym pomysłem.
mystrdat