Виправлена ​​ширина комірки таблиці

Дуже багато людей все ще використовують таблиці для компонування елементів керування, даних тощо - одним із прикладів цього є популярний jqGrid. Однак, трапляється якась магія, яку я не можу здатись (її таблиці для крику вголос, скільки магії це може бути?)

Як можна встановити ширину стовпців таблиці та дотримуватися її, як це робить jqGrid !? Якщо я спробую це повторити, навіть якщо я встановлюю кожну <td style='width: 20px'>, як тільки вміст однієї з цих комірок перевищує 20 пікселів, комірка розширюється!

Якісь ідеї чи ідеї?

Ви можете спробувати використовувати <col>тег управління стилем таблиці для всіх рядків, але вам потрібно буде встановити table-layout:fixedстиль на <table>клас css або таблиці та встановити overflowстиль для комірок

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>

і це ваш CSS

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

Тепер у HTML5 / CSS3 у нас є краще рішення проблеми. На мою думку, це суто рішення CSS рекомендується:

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>

Потрібно встановити таблицю widthнавіть у розчині для переслідування . Інакше це не працює.
Крім того, нова функція , яка CSS3 VSync запропонував це: word-break:break-all;. Це також розіб'є слова без пробілів у кількох рядках. Просто змініть код таким чином:

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

Кінцевий результат

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

У мене була одна довга комірка таблиці таблиці, це примусило таблицю до країв браузера і виглядало некрасиво. Я просто хотів, щоб цей стовпець був лише фіксованого розміру і ламав слова, коли він досягне вказаної ширини. Тож для мене це спрацювало добре:

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

Вам не потрібно вказувати будь-який тип стилю для таблиці, елементів tr. Ви також можете використовувати переповнення: приховано; як пропонують інші відповіді, але це призводить до зникнення зайвого тексту.

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

10х10

для таблиці FULLSCREEN з шириною:

• ширина столу ОБОВ'ЯЗКОВО бути 100%

• якщо потрібно N Colunms, то ПОВИННІ бути N + 1

приклад для 3 стовпців:

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

: перша дитина ...: nth-дитина (1) або ...