Перенос слов в длинную ячейку таблицы при сохранении динамической ширины в других

Question

У меня есть таблица с длинной строкой в ​​одной из ее ячеек.Мне нужно разделить длинную строку, чтобы таблица не была шириной более 100%.Я обнаружил, что, добавив table-layout: fixed и word-wrap: word-break, он обернет длинную ячейку.Однако побочным эффектом использования table-layout является то, что все столбцы имеют одинаковую ширину.

Пример этого можно увидеть здесь:

http://jsfiddle.net/RYdLd/2/

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

Данные в таблице будут загружаться динамически, поэтому решение, которое использует жесткие коды ширинызначения не годятся, потому что заранее узнать, насколько широким должен быть столбец, невозможно.Мой единственный вариант - использовать <table>, я не могу использовать <div> или какой-либо другой элемент.

Answer 1

Согласно официальной спецификации , когда вы используете фиксированный table-layout, ширина столбцов первой строки определяет ширину столбцов всей таблицы. Если ни один из них не определен, он будет равномерно распределять ширину столбцов.

Поскольку, похоже, нет никакой другой опции, я остановился на следующем методе:

1. Загрузка данных в таблицу, когда для table-layout установлено значение auto.
2. Чтение ширины столбцов. Я хочу быть динамическим.
3. Установка ширины столбцов в их текущие значения.
4. Изменение table-layout на фиксированное.

Вот пример, который не идеален (ширина немного уменьшается):

http://jsfiddle.net/RYdLd/7/

Answer 2

Я обнаружил это, борясь с той же проблемой:

Установка разрывного слова для элемента в точности соответствует вставке пробела нулевой ширины между каждым символом текста, содержащегося внутри этого элемента.

За исключением того, что это действительно работает с обычными динамическими таблицами!

Это решение очень быстрое, так как не требует никакого JavaScript.

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

Пространство нулевой ширины ​

Answer 3

Легко обрабатывать / переносить длинные слова в DIV s и фиксированные таблицы ( макет таблицы: фиксированный ) - просто примените слово CSS3 -wrap: break-words .

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

Несколько более подробное объяснение можно найти в статье Обтекание длинных слов в динамических таблицах .

Answer 4

Вы можете использовать: стиль css для переноса слов, чтобы разбить длинные предложения.

word-wrap: break-word