web-dev-qa-db-ja.com

列の数が不明な場合、HTMLテーブルの列幅を均等に分散するにはどうすればよいですか？

JSF/ICEFacesを使用していて、（実行時に）行数と列数が不明な動的ツリー構造からテーブルを生成する必要があります。テーブルには_width: 100%;_が含まれている必要があるため、コンテナ内のすべてのスペースを占有します。

テーブルに必要なすべてのマークアップを生成できますが、セルの幅が同じではないことがわかりました。

レンダリングする要素の数がわかっていれば、CSS width: (100/numberOfColumns)%を設定するのは簡単です。残念ながら、バッキングBeanから返されたクラスは変更できないため、_ui:repeater_コンポーネントを使用してクラスを反復処理することしかできません。

テーブルのすべての列が同じ幅であることを確認するためのCSSの方法があるかどうかを知っていますか？

私はJavaScriptの方法を使いたくありません。できるだけクリーンなコード。

htmlcssjsffacelets
22
usr-local-ΕΨΗΕΛΩΝ
table {
    table-layout : fixed;
}
50
Mark Kahn

maximum列の数について少なくともアイデアがある場合：特定の量の列が指定されている場合にのみ特定の分布を適用するためのソリューションは次のとおりです。

私の例では、原則に集中し、均等に分散された列を作成します。 table-layout：fixedおよびwidth：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%}

それは言う：行の2番目の最後の要素の次の兄弟に適用する：幅50％。 （少なくとも2つの列がある場合、これは最初の要素を除くすべての列です）。 2、3、4、またはそれ以上の列がある場合、このセレクターが適用されます。

しかしその後：

行の最後から3番目の要素の次の兄弟に適用：幅33.3％：再度：このセレクターは、少なくとも3つの要素がある場合にのみ機能します。これは前のセレクター（nth-last-child（2））のルールを上書きするため、列の幅は33.3％になります。列が2つしかない場合、このセレクターは適用されません。

そして、4つの列についても同じです。以前に定義したルールを再度上書きします。

考えられる列数ごとに幅を定義する必要があることに注意してください。したがって、許可される列の最大数が20の場合、これはCSSの21行になります。

このソリューションはIE8ではなくIE9 +と互換性があると思います。しかし、私は現在100％確実ではありません。 http://caniuse.com/css-sel を参照してください

9
Thomas Praxl