largura dinâmica da Tabela como por coluna

Question

Eu tenho uma tabela que exibem dados a partir de conteúdo dinâmico, quero fazer a tabela largura de 100% quando há 6 cols. e mesa auto largura se menos os 5 cols.

Eu tentei com CSS, mas, quando há apenas dois cols, ele expandir duas cols a largura total, enquanto tem mesa 100% largura e aparência estranha.

Há qualquer script Javascript, jQuery disponível para obter esse resultado?

Answer 1

Usando jQuery e garantir que você escolher a primeira linha no corpo da tabela no caso do thead tem um layout diferente.

function setTableWidth(tableId) {

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

 }

Answer 2

Dependendo de como você está carregando o conteúdo dinâmico, pode haver uma maneira mais fácil, mas esta função deve fazer o que você precisa:

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';
 }

Note, porém, que não vai funcionar se qualquer uma das células na primeira linha têm um colspan. É simplesmente contando o número de colunas na primeira linha e definir a largura com base nisso.