Как равномерно распределить ширину столбцов в таблице HTML, когда их число неизвестно?

Я работаю с JSF/ICEFaces, и мне нужно создать таблицу из динамической древовидной структуры с неизвестным (во время выполнения) числом строк и столбцов. Таблица должна иметь width: 100%;, чтобы она занимала все пространство внутри своего контейнера.

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

Мне было бы легко установить CSS width: (100/numberOfColumns)%, если бы я знал количество элементов, которые я просматриваю. К сожалению, я не могу изменить классы, возвращенные моей поддержкой bean, поэтому я могу перебирать только их с помощью компонента ui:repeater.

Знаете ли вы, есть ли способ CSS, чтобы убедиться, что все столбцы в таблице имеют одинаковую ширину, независимо от того, что это такое?

Я бы не хотел использовать Javascript. Как можно более чистый код.

Ответ 2

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

Мой пример концентрируется только на принципе и создает равномерно распределенные столбцы. Обратите внимание, что при использовании табличного макета это сверхтекучее: фиксированное и ширина: 100%.

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

Скажем, максимально допустимое количество столбцов равно 4 (включая возможные строчные заголовки). Учитывая, что вы используете tbody в своей таблице, как в следующем примере:

<table>
   <thead>
      <tr><th>X</th><th>A</th><th>B</th><th>C</th></tr>
   </thead>
   <tbody>
      <tr><th>1.</th><td>a</td><td>b</td><td>c</td></tr>
      [...]
   </tbody>
</table>

Код CSS:

table{table-layout:fixed;width:100%;}
tbody>tr>*:nth-last-child(2)~*{ width:50%}
tbody>tr>*:nth-last-child(3)~*{ width:33.3%}
tbody>tr>*:nth-last-child(4)~*{ width:25%}

В нем говорится: Применитесь к следующим братьям и сестрам второго последнего элемента строки: ширина 50%. (Что все столбцы, кроме первого элемента, если есть как минимум 2 столбца). Если есть два, три, четыре или более столбца, этот селектор применяется.

Но тогда:

Обратитесь к следующим братьям и сестрам третьего последнего элемента строки: ширина 33,3%: Опять же: этот селектор работает только в том случае, если есть как минимум три элемента. Он перезаписывает правила предыдущего селектора (nth-last-child (2)), так что ваши столбцы теперь имеют ширину 33,3%. Этот селектор не применяется, если имеется только два столбца.

И затем: То же самое для четырех столбцов. Он снова перезаписывает ранее определенные правила.

Помните, что вам нужно определить ширину для каждого возможного количества столбцов. Итак, если было максимально допустимое количество 20 столбцов, это будет 21 строка css.

Я считаю, что это решение совместимо с IE9 +, а не с IE8. Но я на данный момент не уверен на 100%. См. http://caniuse.com/css-sel3

Знаете ли вы, есть ли способ CSS, чтобы убедиться, что все столбцы в таблице имеют одинаковую ширину, независимо от того, что это такое?

Ответ 1

Ответ 2