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

Question

Многие люди до сих пор используют таблицы для разметки элементов управления, данных и т. Д. - одним из примеров этого является популярная jqGrid.Тем не менее, происходит какое-то волшебство, которое я не могу понять (его таблицы для вслух, сколько может быть волшебства?)

Как можно установить ширину столбца таблицы и подчиниться ейкак делает jqGrid !?Если я попытаюсь повторить это, даже если я установлю каждые <td style='width: 20px'>, как только содержимое одной из этих ячеек станет больше 20 пикселей, ячейка расширится!

Answer 1

Вы можете попробовать использовать стиль управления таблицами тега <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; }

Answer 2

Теперь в 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;}

Окончательный результат

Answer 3

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

Answer 4

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

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

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

Answer 5

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

: первый ребенок ...: nth-child (1) или ...

Answer 6

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

10x10