Larghezza dinamica della tabella secondo la colonna

Question

Ho una tabella che mostra i dati come da Dynamic Content, voglio rendere la tabella larghezza 100% quando ci sono 6 cols. e tabella larghezza auto se meno i 5 col.

Ho provato con CSS ma, quando ci sono solo due colonne, espande due colonne alla massima larghezza mentre ha una tabella al 100% di larghezza e sembra imbarazzante.

È disponibile JavaScript, jQuery script per ottenere questo risultato?

Answer 1

Usando jQuery e assicurandoti di scegliere la prima riga nel corpo della tabella nel caso in cui il thead abbia un layout diverso.

function setTableWidth(tableId) {

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

 }

Answer 2

A seconda di come stai caricando il contenuto dinamico, potrebbe esserci un modo più semplice, ma questa funzione dovrebbe fare ciò di cui hai bisogno:

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

Nota, tuttavia, che non funzionerà se una qualsiasi delle celle della prima riga ha un colspan. Sta semplicemente contando il numero di colonne nella prima riga e impostando la larghezza in base a quello.