CSS Table Forced Wrapping - PullRequest
Новая
       21

CSS Table Forced Wrapping

0 голосов
/ 04 августа 2011

У меня есть три столбца таблицы на основе CSS.Таблица разработана таким образом, чтобы первые два столбца были сжаты до минимальной ширины относительно содержимого, заполняющего их, чтобы третий столбец мог заполнить большую часть представления.Звучит довольно просто, верно?Ну, третья колонка продолжает доставлять мне неприятности.

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

Мне известно о «переносе слов: слово-разрыв»;вариант, но это не работает, потому что я не могу определить ширину, если я не знаю ширину дочерних элементов.Я также попробовал «разбить слово: разбить все»;- Это работает, но не очень приятно видеть перенос слов в середине слова, который на законных основаниях может быть вырезан из пробела.

Кто-нибудь знает о чистом решении HTML & CSS 3 с двумя дочерними полямии третий, который может переносить длинный текст без использования JavaScript или других средств?

Примеры макета и кода: 

--------------------------------------------------------------------------------------------
| Width Matches Largest Cell of Column | Same for Second |     Fill All Available Space    |
--------------------------------------------------------------------------------------------
| Width Matches Largest Cell of Column | Same for Second |     Fill All Available Space    |
--------------------------------------------------------------------------------------------

<div class="table_class">
<div class="table_row">
<div class="cell1">data</div>
<div class="cell2">data</div>
<div class="cell3">datadatadatadata…</div>
</div>
</div>

Ответы [ 2 ]

2 голосов
/ 04 августа 2011

Если вы отображаете табличные данные и пытаетесь сделать ваши div'ы похожими на таблицу, почему бы просто не использовать таблицу?Они предназначены для того типа поведения, который вы описываете:

http://jsfiddle.net/Mk7jS/1/

1 голос
/ 04 августа 2011

Используется ли этот макет таблицы для табличных данных?Потому что в этом случае вы должны использовать таблицы .

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

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

...