Фиксированная ширина ячейки таблицы

Многие люди до сих пор используют таблицы для разметки элементов управления, данных и т. Д. Одним из примеров этого является популярная 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, это заставило стол к краям браузера и выглядело ужасно. Я просто хотел, чтобы этот столбец был только фиксированного размера и разбивал слова, когда он достигал указанной ширины. Так что это хорошо сработало для меня:

<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 столбцов, то это должно быть 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;
}

: first-child ...: nth-child (1) или ...