Question

我有一个表格显示来自动态内容的数据，我想在有6个cols时使表格宽度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并确保您选择表体中的第一行，以防thead具有不同的布局。

function setTableWidth(tableId) {

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

 }

表格的动态宽度按列

2 个答案: