每列表格的动态宽度

Question

我有一个表，该表显示动态内容中的数据，当有6个列时，我想使表宽度为100％ 。 和表宽度自动（如果减去5个cols）。

我尝试使用CSS，但是当只有两个cols时，它将两个cols扩展为全宽，而表的宽度为100％，看起来很尴尬。

是否有可用的Javascript，jQuery脚本来获得此结果？

Answer 1

根据您加载动态内容的方式，可能有一种更简单的方法，但是此函数应满足您的需要：

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，则它将不起作用。 它只是在计算第一行中的列数并基于此设置宽度。

Answer 2

使用jQuery并确保您选择表主体中的第一行，以防thead具有不同的布局。

function setTableWidth(tableId) {

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

 }