Problème d'affichage de mon tableau html/css dans ma page web

Bonjour,

Je gère un site web pour une entreprise privée. J'ai ajouté des nouvelles données, ce qui a produit de nouvelles colonnes sur le tableau du site web en question. Cependant, l'ajout des nouvelles colonnes a conduit à couper mon tableau, et on ne voit désormais plus toutes les colonnes, il manque les dernières. Pourtant, j'ai bien une barre déroule horizontale mais elle s'arrête au niveau de l'ajout des nouvelles colonnes.
Mon tableau est en html/css. Avez-vous déjà rencontré ce problème ? Pouvez-vous m'aider svp ?

Bonjour. Est-ce que vous obtenez quelque chose comme ceci ? : Tables
Modifié par Olivier C (05 Sep 2023 - 08:27)

Oui exactement. Mais je n’arrive pas à dérouler de gauche à droite. C’est comme si j’avais un screen de l’écran qui était coupé sur la droite.

Du coup, l'astuce se situe au niveau d'un conteneur à ajouter autour du tableau :

<div role="region" aria-labelledby="Caption01" tabindex="0">
  <table><!-- Tout le contenu de mon tableau ici --></table>
</div>

À adapter selon votre HTML, notamment si vous avez déjà un élément conteneur.

Ensuite le CSS :

[role=region][aria-labelledby][tabindex] {
  overflow-x: auto; /* Le secret est ici */
}
[role=region][aria-labelledby][tabindex]:focus-visible {
  outline: 0.1em solid #ffa600;
}

Cerise sur le gâteau : avec cette astuce le tableau est aussi accessible à partir du clavier et plus seulement via la souris.
Modifié par Olivier C (05 Sep 2023 - 22:58)

J'ai l'impression que ça fonctionne donc merci beaucoup.

J'ai juste un petit souci. Au dessus du tableau, il y avait des liens excel, pdf, csv pour extraire les données. Quand je mets ce code, les petits onglets d'extraction des données disparaissent... Comment puis-je faire ?

Code : $(document).ready(function() {
$('#table').DataTable( {
"fixedHeader": true,
"asStripeClasses": [ '' ],
"columnDefs": [
{ "width": "20%", "targets": 0 },
{ "width": "10%", "targets": 1 },
{ "width": "10%", "targets": 2 }
],
paging: false,
"ordering": false,
"autoWidth": false,
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
} );
} );