Как предотвратить растягивание таблицы html?

Иногда, когда часть данных в одной из моих ячеек таблицы слишком длинная, она растягивает ячейку и деформирует структуру всей таблицы. как я могу предотвратить это?

Ответ 1

Вероятно, вы хотите table-layout:fixed и установить ширину в первых ячейках строки.

Подробнее см. http://www.w3.org/TR/CSS2/tables.html#fixed-table-layout.

Ответ 2

У меня была одна и та же проблема, и я решил ее решить следующим образом:

table { width: 1px; /* This ugly hack allows the table to be only as wide as necessary, breaking text on spaces to allow cells to be less wide. */ }

По-видимому, установка ширины таблицы на что-то очень маленькое заставляет ее сломать текст и сделать меньше горизонтального пространства. Слова не будут сломаны, поэтому таблица будет по крайней мере достаточно большой для самого большого слова каждого столбца.

Проверено и проверено на:

Linux (Ubuntu 10.04)

Firefox 3.6.18
Chromium-browser 12.0.742.112 (90304), что бы это ни значило
Konqueror 4.5.3
SeaMonkey 2.0.11

Окна:

Internet Explorer 7
Firefox 4.0.1

Если кто-то (я не могу в моей нынешней ситуации) мог протестировать это в последних версиях IE, Firefox, Chrome, Safari и Opera и оставить комментарий или отредактировать этот ответ, это было бы потрясающе!

Ответ 3

Задайте ширину и высоту тега td с помощью CSS. Затем вам нужно иметь дело с переполнением.

td {
  width: 40px;
  height: 20px;
}

Ответ 4

Предполагая, что у вас нет каких-либо неразрывных пробелов или сверхдолгого текста без пробела в ячейке, мне обычно повезло, явно устанавливая ширину указанной ячейки через CSS (кажется, работает лучше, чем делая что-то вроде "width = '100". Если данные в ячейке являются действительно длинной строкой, вы не можете много сделать, кроме как обрезать ее программно, или обернуть данные в div с явной шириной и что-то вроде overflow: hidden/auto (авто, если вы хотите горизонтальную полосу прокрутки или что-то в этом роде).

Ответ 5

Используйте overflow: hidden, чтобы скрыть переполнение как таковое:

td, th {
    overflow: hidden;
}

Для этого вам нужно присваивать тегам <td> или <th> ширину.

Ответ 6

Если вы должны абсолютно иметь таблицу, поддерживающую ее макет даже перед лицом неразрывных пробелов, вам нужно будет использовать:

 overflow: hidden;

Однако я бы рекомендовал против этого. IMO, более важно, чтобы данные были читаемыми, чем идеальный макет.