Largeur dynamique du tableau selon la colonne

Question

Je dispose d'un tableau qui affiche des données à partir de Dynamic Content. Je souhaite créer un tableau width 100% lorsqu'il y a 6 colonnes. et la table largeur auto si moins de 5 colonnes.

J'ai essayé avec CSS mais, quand il n'y a que deux colonnes, il étend deux colonnes à la largeur totale tout en ayant un tableau de 100% de largeur et un aspect gênant.

Existe-t-il un script Javascript ou jQuery disponible pour obtenir ce résultat?

Answer 1

Utilisez jQuery et assurez-vous de choisir la première ligne du corps du tableau au cas où la tête aurait une présentation différente.

function setTableWidth(tableId) {

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

 }

Answer 2

En fonction de la manière dont vous chargez le contenu dynamique, il existe peut-être un moyen plus simple, mais cette fonction doit répondre à vos besoins:

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

Notez cependant que cela ne fonctionnera pas si l'une des cellules de la première ligne a un colspan. Il suffit de compter le nombre de colonnes dans la première ligne et de définir la largeur en fonction.