Naprawiono szerokość komórki tabeli


175

Wiele osób nadal używa tabel do układania elementów sterujących, danych itp. - jednym z przykładów jest popularny jqGrid. Jednak dzieje się jakaś magia, której nie mogę pojąć (jej tablice do głośnego płaczu, ile magii może być?)

Jak to jest możliwe, aby ustawić szerokość kolumny tabeli i być przestrzeganym, tak jak robi to jqGrid !? Jeśli spróbuję to powtórzyć, nawet jeśli <td style='width: 20px'>ustawię co , jak tylko zawartość jednej z tych komórek jest większa niż 20 pikseli, komórka się rozszerza!

Jakieś pomysły lub spostrzeżenia?

Odpowiedzi:


249

Możesz spróbować użyć <col>tagów zarządzanie stylami tabeli dla wszystkich wierszy, ale będziesz musiał ustawić table-layout:fixedstyl w <table>klasie css lub tabele i ustawić overflowstyl dla komórek

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col

<table class="fixed">
    <col width="20px" />
    <col width="30px" />
    <col width="40px" />
    <tr>
        <td>text</td>
        <td>text</td>
        <td>text</td>
    </tr>
</table>

a to będzie Twój CSS

table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }

15
col nie działałby w html5, zamiast tego ustaw szerokość poszczególnych td przez wbudowane klasy css lub css
Pankaj Phartiyal

10
Zaakceptowana odpowiedź nie zadziała, chyba że wyraźnie zastosujesz szerokość dla żądanej tabeli. Działa doskonale, niezależnie od tego, czy używasz jednostki, czy procentu. Pomyślałem, że zwrócę na to uwagę, ponieważ odpowiedź @ totymedli nie otrzymała żadnych głosów i nie chciałem, aby użytkownicy ją ignorowali. Jednak sugestia podziału słów nie jest konieczna, chyba że do tego zmierzasz.
thebdawk05

Co się dzieje, gdy masz wiersze zawierające tylko 1 element TD, który obejmuje wiele kolumn? Korzystając z przykładowego kodu, czy gdybyś miał <TD colspan="3">sam wiersz, miałby on 90 pikseli?
sab669

Dzięki, pomogło. Aby dane się nakładały, dodaj to table.fixed td { word-wrap: break-word; }.
Parag Tyagi,

Sugestia podziału wyrazów nie jest konieczna, ale jest przydatna dla pozostałych użytkowników SO i całkiem związana z pytaniem, ponieważ przepełnienie tabel o stałej szerokości prawie na pewno wystąpi w większości scenariuszy.
Amy Pellegrini

101

Teraz w HTML5 / CSS3 mamy lepsze rozwiązanie problemu. Moim zdaniem to rozwiązanie czysto CSS jest zalecane:

table.fixed {table-layout:fixed; width:90px;}/*Setting the table width is important!*/
table.fixed td {overflow:hidden;}/*Hide text outside the cell.*/
table.fixed td:nth-of-type(1) {width:20px;}/*Setting the width of column 1.*/
table.fixed td:nth-of-type(2) {width:30px;}/*Setting the width of column 2.*/
table.fixed td:nth-of-type(3) {width:40px;}/*Setting the width of column 3.*/
<table class="fixed">
    <tr>
        <td>Veryverylongtext</td>
        <td>Actuallythistextismuchlongeeeeeer</td>
        <td>We should use spaces tooooooooooooo</td>
    </tr>
</table>

Musisz ustawić stół widthnawet w roztworze nawiedzonym . W przeciwnym razie to nie zadziała.
Również nowa funkcja CSS3 że vsync sugerowane jest: word-break:break-all;. Spowoduje to również podzielenie słów bez spacji na wiele wierszy. Po prostu zmodyfikuj kod w ten sposób:

table.fixed { table-layout:fixed; width:90px; word-break:break-all;}

Ostateczny wynik

Renderowany stół


Jeśli wrzucisz wiersz z a colspan, wydaje się, że to zepsuje to rozwiązanie. Jakieś sugestie dotyczące korzystania z tego rozwiązania w przypadku tabeli zawierającej colspan> 1?
Eric K

@QuantumDynamix Poprawiłem to, dodając jako pierwszy wiersz wiersz bez kolumn, tylko wszystkie poszczególne kolumny o szerokościach. Następnie ukryłem ten wiersz z wysokością 0, obramowaniem: brak, widocznością: ukryty, wypełnieniem: 0px itd., A następnie drugi wiersz jest pierwszym, który chcę zobaczyć, gdzie są colspany. Pierwszy wiersz z pojedynczymi komórkami o stałej szerokości określa szerokości.
AaronLS

@totymedli Jakieś pomysły, jak sprawić, by moja tabela uwzględniła sumę wszystkich szerokości moich kolumn? Moja tabela jest generowana nieco dynamicznie, więc nie mogę z góry obliczyć szerokości tabeli, ale nie chcę używać 100%, ponieważ rozciąga to niektóre elementy.
AaronLS

14
table td 
{
  table-layout:fixed;
  width:20px;
  overflow:hidden;
  word-wrap:break-word;
}

9
Czy na pewno możesz użyć table-layoutelementu td?
Nick

@Nick - działa dobrze. Jednak muszę dodać również właściwości min-width i max-width (ta sama wartość co width), a wtedy stała się naprawdę stałą szerokością.
Denis Khay

11

Miałem jedną długą komórkę tabeli td, co zmusiło stół do krawędzi przeglądarki i wyglądał brzydko. Chciałem tylko, aby ta kolumna miała tylko stały rozmiar i łamała słowa, gdy osiągnie określoną szerokość. Więc to działało dobrze dla mnie:

<td><div style='width: 150px;'>Text to break here</div></td>

Nie musisz określać żadnego stylu do tabeli, elementy tr. Możesz także użyć overflow: hidden; jak sugerują inne odpowiedzi, ale powoduje to zniknięcie nadmiaru tekstu.


2
W razie potrzeby możesz też użyć max-width zamiast width. Pozwoli ci to nie łamać tekstu, dopóki nie osiągniesz limitu szerokości. A komórka tabeli nie będzie miała pustego miejsca, jeśli tekst jest mniejszy niż określona szerokość. <td> <div style = 'max-width: 150px;'> Tekst do podziału tutaj </div> </td>
Tarik


0

dla stołu szerokości FULLSCREEN:

  • szerokość stołu MUSI wynosić 100%

  • jeśli potrzeba N kolumn, to TH MUSI wynosić N + 1

przykład dla 3 kolumn:

table.fixed {
      table-layout: fixed;
      width: 100%;
    }
    table.fixed td {
      overflow: hidden;
    }
  <table class="fixed">
      <col width=20 />
      <col width=20 />
      <col width=20 />
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>FREE</th>
    </tr>
    <tr>
      <td>text111111111</td>
      <td>text222222222</td>
      <td>text3333333</td>
    </tr>
  </table>


-2
table
{
  table-layout:fixed;
}
td,th
{
  width:20px; 
  word-wrap:break-word;
}

: first-child ...: nth-child (1) lub ...

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.