Overflow d'un <table>

Bonjour à tous !

Remerciant les contributeurs de mon message précédent, j'ai fini la lecture de w3school et je me pense sur mon exemple perso.

J'ai réussi beaucoup de choses, exactement comme je le voulais. Mais j'ai maintenant 1 soucis sur la gestion de tableaux: Pour l'histoire, j'ai un énorme tableau a affiché, de plusieurs dizaines de lignes, sur plusieurs colonnes... et pour éviter de tout détruire. Je voudrais mettre un overflow-x: Il ne s'affiche pas et prefère diminuer la largeur de mes colonnes et d'ajouter une scroll bar quand il ne peut plus plutôt que d'ajouter la scroll directement...

Voici comment je m'y prends:

HTML:

<div style="overflow-x:auto;">
<table>
      <tr class="h40 bts bbs">
        <th class="w115 tac">Nom</th>
        <th class="w115 tac">Prénom</th>
        ....... (Plusieurs dizaines de colonnes)
      </tr>
</table

Définitions CSS

.w115 { width: 115px!important;} /* Exemple pour une colonne */

Ma question est simple: Comment puis-je obligé la scroll dès qu'on est plus large que la div sans devoir préciser la largeur de la table? (Si je précise ça marche, mais comme mon table est sur plusieurs tableaux, ils ne font pas la même taille et sont amenés à être générés en PHP).

Suis-je obligé de créer une class/id pour chaque table et en préciser la largeur?

Idem pour la hauteur: je spécifie la taille du <div> mais la scroll ne s'affiche pas...

Merci par avance !

Vincent

(Nota: le style="" de la div va être supprimé pour être mis dans le CSS, bien sur mais pour tester j'ai préféré là).
Modifié par Vbpix (14 Dec 2017 - 14:44)

Bonjour !

Merci pour ta réponse.

Un tableau avec des largeurs égales sur toutes les colonnes, ce serait trop facile...

J'ai lu le code, je n'y connais rien en javascript mais je me penche plutôt sur le deuxième.

Peux-tu me confirmer que "data-column-width"))*$(this).find("th").length recherche la largeur de chaque colonne, et qu'il ne tient pas compte de la valeur de data-column-width="115px"? (Utile uniquement pour la recherche par attribut?).

Merci !

Vincent

Bonjour,

Je sais pas si j'ai tout compris :
mais comme mon table est sur plusieurs tableaux, ils ne font pas la même taille .

Si tu mets un width:100% sur le table.
Tes colonnes devrais s'auto-adaptées et si le tableau est vraiment trop grand le scroll apparait....

.w115{width : 7.6923%; /* 100/13  13 nb cololonne */}

<div style="overflow-x:auto;">
<table width="100%" border="1">
      <tr class="h40 bts bbs">
        <th class="w115 tac">Nom</th>
        <th class="w115 tac">Prénom</th>
        <th class="w115 tac">Nom</th>
        <th class="w115 tac">Prénom</th>
        <th class="w115 tac">Nom</th>
        <th class="w115 tac">Prénom</th>
        <th class="w115 tac">Nom</th>
        <th class="w115 tac">Prénom</th>
        <th class="w115 tac">Nom</th>
        <th class="w115 tac">Prénom</th>
        <th class="w115 tac">Nom</th>
        <th class="w115 tac">Prénom</th>
        <th class="w115 tac">Nom</th>
      </tr>
       <tr class=" ">
        <td class="w115td">Nom</td>
        <td class="w115td">Prénom</td>
        <td class="w115td">Nom</td>
        <td class="w115td">Prénom</td>
        <td class="w115td">Nom</td>
        <td class="w115td">Prénom</td>
        <td class="w115td">Nom</td>
        <td class="w115td">Prénom</td>
        <td class="w115td">Noq sdj hd;jh kfjh ksjhsdkjf hdksfjhqs :kjfhdkjsh dsfdqs fffksdhfj kjqshfkj hkjsdhfksdhf kdsm</td>
        <td class="w115td">Prénom</td>
        <td class="w115td">Nom</td>
        <td class="w115td">Prénom</td>
        <td class="w115td">Nom</td>
      </tr>
</table>
</div>

Modifié par aliasdmc (15 Dec 2017 - 19:12)

J'ai retrouvé une technique pas très glamour qui consiste à utiliser le caractères espace insécable &nbsp; pour rédiger les entêtes des colonnes des tableaux
exemple :

<th class="tac"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;NOM&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>

sinon en JQuery j'ai fait un poil plus compliqué mais tu n'as rien à changer dans la syntaxe de tes colonnes : le script recherche la class "w"+la_taille(ex:w115) dans tes cellules d'entête (th) et les cumules pour calculer la taille du tableau :

$('table').each( function() {
      var tw=0;
      $(this).find("th").each( function() {
             var regex = new RegExp("w[0-9]+");
             var laclassw = $(this).attr("class").match(regex);
             if (laclassw != null) {
                  $(this).css("width",parseInt(laclassw[0].substr(1)));
                  tw+=parseInt(laclassw[0].substr(1));
              }
       });
       $(this).css("width",tw);
});

Il y a aussi plus radical : n'utilise pas le tag <table>....

Bonne nuit,
GJboba

Salut !

Merci pour vos réponses !

AliasDmc: j'ai plusieurs tableaux dans mes pages, donc plusieurs balises <table>. Elles sont sont pas identiques donc.

GJboba: Pas mal ce petit script en jQuery ! Je n'y connais rien mais j'arrive à décrypter ce qu'il fait. Je me penche dessus dès que je suis devant mon ordinateur !

Ta dernière phrase laisser rêveur: Ne pas utiliser de tableau pour afficher des données: C'est une idée que j'avais lu quelle part (mais où?...). Mais c'est quand même beaucoup plus logique un <table> non? (Du div a foison sinon?)

Je reviens vers vous dès que possible

Vincent