[Résolu] Remplacer un <td colspan="...">

Bonjour à tous
Je suis en train de travailler sur un ancien site qui n'avait pas vocation d'être responsive.
La plupart des pages contiennent des <table> qui sont sémantiquement des "tables", mais bien entendu quand je veux les afficher sur des écrans étroits elles débordent amplement, sauf à réduire la taille de leur contenu ce qui le rend illisible.
Je cherche une solution purement CSS à cette situation, je veux dire: éviter de remanier en JavaScript le contenu de la page, ce que je faisais avant d'utiliser CSS3.

Pour cela, une approche simple consiste à remplacer les <table> par des <ul>, les <tr> par <li> et les <td> par des <div>
Pour les écrans large, on écrit:

ul {display:table}
li {display:table-row}
li div {display:table-cell}

Pour les écrans étroits, on ajuste le CSS en fonction des besoins.

Cela marche bien... sauf pour le point suivant:
Certaines des lignes <tr> contiennent le code suivant

<tr class="title"><td colspan="6"><h3>Titre de la section qui suit</h3></td></tr>

Je n'ai pas trouvé de moyen, pour les écrans larges, à écrire un équivalent

<li class="title"><h3>Titre de la section qui suit</h3></li>

produit un "titre" qui prend la largeur de la première colonne des autres lignes, quel que soit le CSS que j'écris, que je mette le <h3> dans une autre balise à l'intérieur du <li>, etc.

L'utilisation d'un

li.title {display:table-caption}

a pour résultat de n'accepter qu'un seul titre, car une <table> ne peut avoir qu'une seule <caption>
Je peux bien entendu oublier totalement les display:table-xxx et figer la largeur des pseudo colonnes" en % de la largeur des <li>, eux mêmes ayant la largeur de 100% du contenant ???

Votre avis?
Modifié par PapyJP (18 Dec 2018 - 14:18)

Bonjour,

pourquoi ne pas plutôt garder les éléments table si ce sont des tableaux de données ?
Il existe des solutions pour sur mobile les "démonter" avec plusieurs comportements possibles.

Grid layout, le plus récent : http://adrianroselli.com/2017/11/a-responsive-accessible-table.html (ça fait un bail que j'avais regardé cette solution, me rappelle plus de ce que j'en pensais… mais tant qu'il n'y a pas besoin d'ajouter au code HTML des data-* ça devrait être bon)
http://web.archive.org/web/20160906110652/http://exisweb.net:80/responsive-table-plugins-and-patterns
https://css-tricks.com/accessible-simple-responsive-tables/ et dans le chapo le lien vers la catégorie entière notamment le "roundup" (ce n'est pas sale) de 2012.

Pour les colspan présentés ici, je dirais que Flexbox avec flex-wrap: wrap et des largeurs "figées" ou bien Grid layout directement devraient faire l'affaire.
Pour Flexbox, si on précise

[colspan="6"] { width: 100%; }

il prendra toute la largeur donc sera seul sur sa ligne tandis que les autres devraient avoir une largeur de calc(100% / 6). Bon autant utiliser Grid en fait

Ce sont des tableaux de données, mais quand la largeur de l'écran passe au dessous d'un certain seuil, je ne veux plus une présentation tabulaire, mais des sortes de boutons flottants se traduisant par l'affichage d'une fenêtre adaptée quand on clique dessus.
Par exemple pour le calendrier des activités de l'association, j'ai une table du type suivant:

<table>
    <tr class="title"><td colspan="6">Évènements de Janvier 2019</td></tr>
    <tr>
        <td>date de l'évènement</td>
        <td>nom de l'évènement</td>
        <td>lieu de l'évènement</td>
        <td>.............</td>
    <tr>

quand on a une largeur insuffisante, ça devient quelque chose comme

    <div>
        <h3>Évènements de Janvier 2019</h3>
       <div>date évt 1</div>
        <div>date évt 2</div>
        <div>date évt 3</div>
        <div>...</div>
    </div>

les <div> de dates sont en inline-block, quand on clique dessus on ouvre une

    <div>
        <h4>12 janvier</h4>
        <p>nom de l'évènement</p>
        <p>lieu de l'évènement</p>
        <p>....</p>
    </div>

Les deux présentations sont faciles à coder en dur, mais passer de l'une à l'autre sur un changement de largeur de fenêtre, par exemple lors d'un changement d'orientation d'une tablette, n'est pas aisé.
Bien sûr je peux toujours le faire en JavaScript, j'ai fait plus compliqué dans les temps où il n'y avait pas de CSS3, mais je serais intéressé à trouver une solution "pur CSS"

Finalement la solution la plus simple est de générer d'un côté une <table>, de l'autre une <div> et de sélectionner la bonne par un mediaQuery
Comme le code n'est pas écrit à la main, mais généré dynamiquement par PHP, ça ne pose pas de problème.