表格的动态宽度（按列）答案

【问题标题】：Dynamic width of Table as per column表格的动态宽度（按列）
【发布时间】：2016-10-06 02:37:13
【问题描述】：

我有一个表格显示来自动态内容的数据，当有 6 个列时，我想使表格 宽度为 100%。如果小于 5 列，则表 width auto。

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

是否有任何 Javascript、jQuery 脚本可以得到这个结果？

【问题讨论】：

【解决方案1】：

使用 jQuery 并确保您选择表格正文中的第一行，以防标题有不同的布局。

function setTableWidth(tableId) {

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

 }

【讨论】：

【解决方案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，它将不起作用。它只是简单地计算第一行中的列数并据此设置宽度。

【讨论】：

非常感谢..让我试试这个。