Stała Szerokość Komórki Tabeli

Wiele osób nadal używa tabel do układania kontrolek, danych itp. - jednym z przykładów jest popularny jqGrid. Jednak dzieje się jakaś magia, której nie mogę pojąć (jego tabele na litość boską, ile magii może być?)

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

Jakieś pomysły lub spostrzeżenia?
Author: Christopher Rapcewicz, 2010-11-15
Source

7 answers

Możesz spróbować użyć znacznika <col> Zarządzaj stylami tabeli dla wszystkich wierszy, ale musisz ustawić styl table-layout:fixed na <table> lub klasę CSS tables i ustawić styl overflow dla komórek

Http://www.w3schools.com/TAGS/tag_col.asp 

<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; }
 256
Author: hunter,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-09-29 17:36:31

Teraz w HTML5 / CSS3 mamy lepsze rozwiązanie problemu. Moim zdaniem to czysto CSS rozwiązanie 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ć width tabelę nawet w } Rozwiązanie . Inaczej to nie zadziała.
Nowa funkcja CSS3, którą Vsync zasugerowała to: word-break:break-all;. Spowoduje to złamanie słów bez spacji w nich do wielu linii zbyt. Wystarczy zmodyfikować kod w ten sposób: 

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

Finał wynik

Renderowana tabela

 102
Author: totymedli,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:33:26 
table td 
{
  table-layout:fixed;
  width:20px;
  overflow:hidden;
  word-wrap:break-word;
}
 15
Author: ajreal,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-09 15:50:31

Miałem jedną długą komórkę TD tabeli, to zmusiło tabelę do krawędzi przeglądarki i wyglądał brzydko. Chciałem tylko, aby kolumna miała stały rozmiar i łamała słowa, Gdy osiągnie określoną szerokość. Więc mi to dobrze wyszło: 

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

Nie musisz określać żadnego stylu do tabeli, elementów tr. Można również użyć overflow: hidden; jak sugerują inne odpowiedzi, ale powoduje to zniknięcie nadmiaru tekstu.

 14
Author: Tarik,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-07 11:44:19 
table { 
    table-layout:fixed; width:200px;
}
table tr {
    height: 20px;
}

10x10

 1
Author: user1993774,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-01-19 23:46:10

Dla tabeli szerokości pełnego ekranu:

  • Szerokość stołu musi być 100%

  • Jeśli potrzebujesz N colunms, THs musi być 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>
 0
Author: Ramil Gilfanov,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-06-04 10:34:58 
table
{
  table-layout:fixed;
}
td,th
{
  width:20px; 
  word-wrap:break-word;
}

:pierwsze dziecko ... : nth-dziecko (1) lub ...

 -2
Author: xhdix,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-13 19:58:53