Принудительная обертка таблицы CSS

У меня есть таблица с тремя столбцами на основе 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>

alignment css width css-tables
person Craig    schedule 04.08.2011    source источник

Ответы (2)


arrow_upward
2
arrow_downward

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

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

person hughes    schedule 04.08.2011

arrow_upward
1
arrow_downward

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

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

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

person OverZealous    schedule 04.08.2011