В таблице HTML, как вы заставляете текст ячейки обрезать, а не увеличивать ширину ячейки или перенос?

Question

Я пробовал несколько настроек стиля CSS, но не могу заставить их работать, я либо получаю текст для переноса, либо увеличиваю размер столбца.

Я попытался установить фиксированный макет таблицы

table { table-layout:fixed; }

Пробовал различные комбинации для колонки.

Name { width: 100px; overflow:hidden; white-space:nowrap; }

Answer 1

Установите ширину на всю таблицу.Ширина может быть установлена ​​в процентах, в пикселях или в других единицах.Вы можете подумать, что достаточно установить ширину каждого столбца или ширину каждой ячейки в первой строке, но по какой-то странной причине это не так.

Фиксированный макет для таблиц имеет много причуд и странностейи один из них заключается в том, что если содержимое не помещается, столбец становится шире, если только не была задана общая ширина таблицы.Кажется, это происходит настолько последовательно в браузерах, что можно даже подумать, что это часть спецификаций (но, насколько я вижу, это не так).

Если вы хотите установить фиксированную ширину (с усечением, когданеобходимо) для некоторых столбцов без установки общей ширины, боюсь, вам нужен обходной путь, например <td><div>...</div></td> со свойствами ширины и переполнения, установленными для элемента div.

Answer 2

Это то, что вы ищете?

http://jsfiddle.net/PW6Bg/

Answer 3

Вы можете установить ширину <td> на фиксированное значение.

Также, пожалуйста, сделайте небольшое исследование, этот вопрос задавался много раз:)