Tableau responsive

[Interned]

Bonjour,

Un tableau comportant de très nombreuses colonnes (disons une bonne dizaine) ne semble pas pouvoir s'afficher en mode responsive lorsque celui-ci s'affiche sur un petit écran (tiny screens).

J'envisageais alors la solution suivante:

@media (max-width: 575px) {
    table,
    .table {
        display: grid;
        table-layout: auto;
        overflow-x: auto;
    }
}

Mais elle a le défaut de ne pas aligner verticalement les colonnes td avec les th.

Il faudrait alors y ajouter une div entourant le tableau, y transférer la propriété overflow-x et supprimer display: grid

@media (max-width: 575px) {
    .wrapper-table {
        overflow-x: auto;
    }
    table,
    .table {
        /*display: grid;*/
        table-layout: auto;
    }
}

Cela semble plutôt bien fonctionner mais cette config nécessite donc une bidouille HTML...

D'où trois questions:

1. s'agit-il d'une méconnaissance de KNACSS de ma part si la solution existe en fait déjà ?
2. ou est-ce plutôt l'illustration d'un cas où il est nécessaire d'adapter le framework à son projet ?
3. corollaire de 1 et 2, quelle serait la solution à suivre ?

Merci d'avance et désolé si c'est ma demande est un peu naïve :/

[raphaelgoetter]

Hello,

Rendre responsive un tableau HTML n'est jamais vraiment évident car cela dépend de la structure de départ (y a t-il des <thead> , <tfoot> ou pas ? la distribution est-elle plutôt verticale ou horizontale ?) mais aussi du résultat souhaité au final.

Bref, tout cela est bien difficile à rendre automatisable (TL;DR ce n'est effectivement pas prévu dans KNACSS).

Dans ton cas, appliquer un display: grid sur ton <table> ne me semble pas suffisant car son seul bénéficiaire sera son enfant direct <tbody> forcément dans le DOM. Pour parvenir à tes fins, il faudrait appliquer des display:grid à tous les niveaux de la hiérarchie de ton tableau.

[Interned]

Merci de ta réponse, Raphaël. Je comprends mieux pourquoi ce n'est pas prévu dans KNACSS.