Ancho dinámico de la tabla según columna

Question

Tengo una tabla que muestra datos del contenido dinámico, quiero hacer que la tabla ancho 100% cuando hay 6 cols. y tabla ancho automático si son menos de 5 cols.

Intenté con CSS pero, cuando solo hay dos cols, expande dos cols al ancho completo mientras que tiene una tabla de 100% de ancho y se ve incómodo.

¿Hay algún script Javascript, jQuery disponible para obtener este resultado?

Answer 1

Usando jQuery y asegurándote de elegir la primera fila en el cuerpo de la tabla en caso de que el thead tenga un diseño 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

Dependiendo de cómo esté cargando el contenido dinámico, puede haber una manera más fácil, pero esta función debería hacer lo que necesita:

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

Tenga en cuenta, sin embargo, que no funcionará si alguna de las celdas de la primera fila tiene un colspan. Simplemente cuenta el número de columnas en la primera fila y establece el ancho en función de eso.