Таблица фиксированной ширины с переменными столбцами

У меня есть таблица фиксированной ширины (style="width: 100%") с динамическими данными, помещаемыми в ячейки. Данные сильно различаются по ширине, а некоторые строки без пробелов превышают длину таблицы. Поэтому я использовал table { table-layout:fixed; word-wrap: break-word; }, чтобы обернуть текст в столбцы и не допустить превышения ширины таблицы за ширину страницы.

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

Есть ли способ сохранить максимальную ширину таблицы, разбить слова и использовать оптимизацию компоновки браузеров для столбцов переменной ширины?


html css css-tables
person mklauber    schedule 14.08.2012    source источник
comment
width: 100% - это не фиксированная ширина, это переменная ширина. Кроме того, можете ли вы показать исходный код HTML и стили для таблиц TD?   -  person Mike Brant    schedule 15.08.2012
comment
Если вы знаете, для каких столбцов потребуется меньшая ширина, вы можете определить ширину заголовка этого столбца. Так, например, если столбец 2 является тонким столбцом, вы можете сказать ‹th style = width: 5%›   -  person karancan    schedule 15.08.2012
comment
@MikeBrant - это переменная ширина, вы, конечно, правы. Но в настоящее время, если данные (без пробелов) в одной из ячеек превышают ширину содержащего div, таблица выходит за край div и за пределы страницы.   -  person mklauber    schedule 15.08.2012
comment
@karancan Это была моя идея, но это не помогает, если у меня есть два (возможно) широких столбца, которые я хочу сбалансировать.   -  person mklauber    schedule 15.08.2012

Ответы (1)


arrow_upward
1
arrow_downward

Если у вас есть столбец, который, как вы всегда ожидаете, будет больше, чем другие, вы должны указать, например, <td width="40%">. Кроме того, если есть столбец, который всегда будет маленьким, вы также можете установить его ширину. Чем больше подсказок вы дадите браузеру, тем лучше будет выглядеть макет.

person dadinck    schedule 14.08.2012
comment
Это то, что я начал делать, но у меня есть два столбца, которые нужно сбалансировать, и, используя table-layout: fixed, они всегда имеют одинаковую ширину. Мне просто было интересно, есть ли способ сделать это без потери оптимизации макета браузера. - person mklauber; 15.08.2012