Jak mogę ograniczyć szerokość kolumny tabeli?

Jedna z kolumn w mojej tabeli może zawierać długi tekst bez białych znaków. Jak mogę ograniczyć jego szerokość do, powiedzmy, 150px? Nie chcę, aby zawsze był 150px (jeśli jest pusty, powinien być wąski), ale jeśli istnieje długi tekst, chcę go ograniczyć za pomocą 150 pikseli i tekstu, który ma być zawijany.Jak mogę ograniczyć szerokość kolumny tabeli?

Oto przykład testu: http://jsfiddle.net/Kh378/ (ograniczmy trzecią kolumnę).

Z góry dziękuję.

Aktualizacja:
Ustawienie tej style:

word-wrap: break-word; 
max-width: 150px;

nie działa w IE8 (testowane na różnych komputerach) i przypuszczam, że nie działa w dowolnej wersji IE.

Źródło

2011-09-14 nightcoder

Ponieważ to pytanie ma prawie trzy lata, a obecnie nie ma nagrody, zastanawiałem się, czy nadal potrzebuje odpowiedzi? –

@Frank Conijn, Tak, to prawda! :) – nightcoder

To 2 lata później odpowiedzieć przez – Developer

Updated

na stole za td i th tagów I dodaje:

word-wrap: break-word; 
max-width: 150px;

nie w pełni zgodne w każdej przeglądarce, ale na początek.

Źródło

2011-09-14 03:01:26 Brandon

Niestety, to nie działa w IE8 (i przypuszczam, że to nie działa w żadnej wersji IE .. .). – nightcoder

Powinieneś być w stanie projektować swoje kolumny:

max-width: 150px; 
word-wrap: break-word;

Zauważ, że word-wrap jest obsługiwana w IE 5.5+, Firefox 3.5+, i przeglądarki WebKit (Chrome i Safari).

Źródło

2011-09-14 03:03:11 isNaN1247

Zobacz to bardziej szczegółowo, zwłaszcza maksymalna szerokość i (obecnie) problemy tam, w podobnym/równoważnym rozwiązaniu tej stronie http://stackoverflow.com/a/24620364/2255628 –

Na pytanie zadano w another StackOverflow thread. W skrócie, powinieneś po prostu użyć width zamiast max-width.

Źródło

2014-12-30 00:08:03

To nie działa dla mnie. Czy mógłbyś proszę przygotować jsfiddle? – nightcoder

Musisz zamiast tego użyć szerokości.

<table> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Age</th>     
      <th style="width: 150px;"></th> 
     </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table>

Ale tylko w sekcji <thead>.

Źródło

2015-08-14 21:09:12

istnieje opcja, aby symulować max-width:

simulateMaxWidth: function() { 
    this.$el.find('th').css('width', ''); // clear all the width values for every header cell 
    this.$el.find('th').each(function(ind, th) { 
     var el = $(th); 
     var maxWidth = el.attr('max-width'); 
     if (maxWidth && el.width() > maxWidth) { 
      el.css('width', maxWidth + 'px'); 
     } 
    }); 
}

funkcja ta może być wywołana na $ (okno) .Na ('rozmiar', ...) wielokrotnie

this.$el

oznacza elementu nadrzędnego, w przypadku mam marionetka

dla tych p elementów, które powinny mieć maksymalną szerokości nie powinna być atrybutem maksymalna szerokość jak:

<th max-width="120">

Źródło

2016-06-28 10:12:59 user2846569

1) Określ szerokość dla każdej kolumny w <th> w zależności od potrzeb.

2) Dodaj zawijanie słów dla każdego <td> w <tr> z <table>.

word-wrap: break-word;

Źródło

2017-05-09 11:43:54

Po niektóre eksperymenty w Chrome doszedłem do następujących:

jeśli tabela ma <th> że powinien mieć albo "szerokości" lub "max-width" set
z <td> musiały ustawić "max-width" i "word-wrap: break-word;"

Jeśli użyjesz "szerokości" w <th>, zostanie użyta jego wartość. Jeśli użyjesz "maksymalnej szerokości" w <th>, zostanie użyta wartość "maksymalna szerokość" <td>.

Ta funkcja jest dość skomplikowana. I nawet nie uczyłem się tabel bez nagłówków lub bez długich łańcuchów, które potrzebują "break-word".

Źródło

2017-10-10 18:34:25 user2587656

bardzo łatwo

Można dodać atrybuty takie jak

max-width

max-height

Mogą być ustawione w HTML jako atrybut lub w CSS jako styl

Źródło

2017-10-11 08:07:22 Kano

Jak mogę ograniczyć szerokość kolumny tabeli?

Odpowiedz

Powiązane problemy