javascript - 表格的动态宽度（按列）

Question

我有一张表格显示来自动态内容的数据，当有 6列时，我想将表格宽度设为 100% 。如果少于 5列，则表宽度自动。

我尝试使用 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 并确保您选择表格正文中的第一行，以防标题具有不同的布局。

function setTableWidth(tableId) {

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

 }