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

Question

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

Answer 1

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

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

Answer 2

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

Answer 3

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

td, th { 
    overflow: hidden; 
} 

Для этого вам необходимо назначить метки <td> или <th>.

Answer 4

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

overflow: hidden; 

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

Answer 5

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

См. http://www.w3.org/TR/CSS2/tables.html#fixed-table-layout для подробного объяснения.

Answer 6

Я просто была такая же проблема и в конечном итоге решить ее с этим:

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
• Хром-браузер 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 и оставить комментарий или отредактировать этот ответ, что было бы удивительным !