javascript - 列ごとの表の動的幅

Question

動的コンテンツからのデータを表示するテーブルが 1 つあります。列が 6 つの場合、テーブルの幅を 100%にしたいと考えています。5 列未満の場合はテーブル幅を自動にします。

私はCSSで試しましたが、2列しかない場合、2列を全幅に拡張しますが、テーブルは100％幅で、ぎこちなく見えます。

この結果を得るために利用できる Javascript、jQuery スクリプトはありますか?

Answer 1

jQuery を使用し、広告のレイアウトが異なる場合に備えて、テーブル本体の最初の行を選択するようにします。

function setTableWidth(tableId) {

    var $tbl = $('#'+tableId);
    var newWidth = $tbl.find('tbody>tr:eq(0)>td').length > 5 ? '100%' : 'auto';
    $tbl.width(newWidth)

 }

Answer 2

動的コンテンツのロード方法によっては、もっと簡単な方法があるかもしれませんが、この関数は必要なことを行うはずです:

function setTableWidth(tableId) {
    myTable = document.getElementById('tableId');
    if (myTable.getElementsByTagName('tr')[0].getElementsByTagName('td').length > 5)
        myTable.style.width = '100%';
    else
        myTable.style.width = 'auto';
 }

ただし、最初の行のいずれかのセルに colspan がある場合は機能しないことに注意してください。最初の行の列数を数え、それに基づいて幅を設定するだけです。