Исправлена ​​ширина ячейки таблицы

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

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

Любые идеи или идеи?

Ответы

Ответ 1

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

Ответ 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>

Ответ 3

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

Ответ 4

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

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

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

Ответ 5

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

10х10

Ответ 6

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

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