Naprawiono szerokość komórki tabeli

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?

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; }

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

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

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.

table { 
    table-layout:fixed; width:200px;
}
table tr {
    height: 20px;
}

10x10

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>

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

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