html - テーブル内の列の数に基づいて異なるスタイルを適用する方法

Question

似たようなテーブルがいくつかありますが、唯一の違いは、列が異なる場合があることです。列数が 2 の場合、最初の td の幅は 80%、2 番目の列の幅は 105 になるスタイルを定義したいと考えています。テーブルに 3 つの列がある場合、それらの幅は 45%、45%、 10%など。

CSSでどうやってそれを行うことができますか? CSS でできない場合、どうすれば JQuery でできますか?

Answer 1

私の知る限り、パーセンテージを計算して列数を検出する必要があるため、CSS だけでは実行できません。

各行の列数が同じであると仮定して（colspanは使用されていません）、jQueryの例でフィドルを設定しました。これが私がそれをした方法です：

var cols       = $('table tr:first td').size(),
    width      = 90 / cols,
    last_width = 10;

$('table td').css('width', width + "%");
$('table tr > td:last-child').css('width', last_width + "%");
​

使用される変数は、列数、最後の列サイズ、およびその他の列サイズ (幅の 90% の列数) です。次に、結果の幅をすべてのセルに適用し、最後の列の幅を各行の最後のセルに適用します。