[Résolu] Tableau horaires avec jour + matin et après-midi sur 2 lignes

Bonjour à tous et à toutes,

J'ai un tableau avec des horaires :

Comme vous pouvez le voir, quand c'est fermé le matin, on a du vide et ça aligne les horaires de l'après-midi à droite.
On m'a demandé d'avoir ce résultat :

Ainsi, quand il y a des horaires le matin ET l'après midi (ex : Mercredi), les horaires du matin sont au-dessus de ceux de l'après-midi et on a le nom du jour à gauche, centré verticalement.

Voici le code HTML du tableau :

<table class="table table-hover table-responsive mt-3" style="table-layout: fixed">
    <tbody>
        <tr>
            <td>
                <strong>Lundi</strong>
            </td>
            <td colspan="2" class="text-center">
                <span>fermé</span>
            </td>
        </tr>
        <tr>
            <td>
                <strong>Mardi</strong>
            </td>
            <td class="text-center"></td>
            <td class="text-center">
                <time>15:00</time> -
                <time>18:30</time>
            </td>
        </tr>
        <tr>
            <td>
                <strong>Mercredi</strong>
            </td>
            <td class="text-center">
                <time>10:00</time> -
                <time>12:30</time>
            </td>
            <td class="text-center">
                <time>15:00</time> -
                <time>18:30</time>
            </td>
        </tr>
        <tr>
            <td>
                <strong>Jeudi</strong>
            </td>
            <td colspan="2" class="text-center">
                <span>fermé</span>
            </td>
        </tr>
        <tr>
            <td>
                <strong>Vendredi</strong>
            </td>
            <td class="text-center"></td>
            <td class="text-center">
                <time>15:00</time> -
                <time>18:30</time>
            </td>
        </tr>
        <tr>
            <td>
                <strong>Samedi</strong>
            </td>
            <td class="text-center"></td>
            <td class="text-center">
                <time>14:00</time> -
                <time>18:00</time>
            </td>
        </tr>
        <tr>
            <td>
                <strong>Dimanche</strong>
            </td>
            <td colspan="2" class="text-center">
                <span>fermé</span>
            </td>
        </tr>
    </tbody>
</table>

Avec le code CSS suivant... :

.table.table-hover.table-responsive.mt-3 > tbody>tr {
  display: flex;
  flex-wrap: wrap;
}
.table.table-hover.table-responsive.mt-3 > tbody > tr > td:first-child {
  flex: 0 92px;
}
.table.table-hover.table-responsive.mt-3 > tbody > tr > td[colspan="2"] {
  flex: 1;
}
.table.table-hover.table-responsive.mt-3 > tbody > tr > td.text-center:has(time) {
  flex: 0 1 auto;
  width: calc(100% - 92px);
  display: flex;
  justify-content: center;
}
.table.table-hover.table-responsive.mt-3 > tbody > tr > td.text-center:not(
  td.text-center:has(time),
  td.text-center[colspan="2"]) {
  display: none;
}

... j'ai ceci :


Je n'arrive pas à faire en sorte d'avoir, quand il y a des horaires le matin ET l'après-midi :
- La cellule avec le jour (ex : Mercredi) soit aussi haute que les 2 autres cellules à sa droite (horaires du matin sur la première ligne + horaires de l'après-midi sur la seconde)
- Le nom du jour soit centré verticalement
- (Du coup que) les horaires de l'après-midi soient alignés avec celles du matin

Si je mets nowrap sur les lignes, je me retrouve avec les horaires du matin et de l'après-midi sur la même ligne.

Comment est-ce que je peux faire ça (sachant que je n'ai pas la main sur le HTML) ?
Est-ce que je peux faire ça en flex ou est-ce que je dois passer par grid (que je maitrise moins)
Merci pour votre aide

P.S : Précision importante, il faut que ça fonctionne pour n'importe quel tableau d'horaires. Ce que je mets ci-dessus n'est qu'un exemple.
Modifié par spip93 (07 Feb 2024 - 11:34)

Bonjour gcyrillus,

Merci beaucoup !! Même si ton code fonctionne à 90%*, ton idée de passer en display:block m'a mis sur une bonne piste

*J'ai dû faire quelques ajustements à cause notamment d'interférences avec d'autres règles CSS de la page (ex : la pseudo-classe empty ne fonctionnait pas pour une raison inconnue, d'où mon code compliqué pour sélectionner quand il n'y a pas d'horaire, ou un vertical-align:top sur la cellule avec les jours)

Dans tous les cas, encore merci pour ton aide.

Bonne journée

spip93 a écrit :
.... ex : la pseudo-classe empty ne fonctionnait pas pour une raison inconnue ...

Bonne journée

Bonne journée à toi aussi
Il suffit d'un simple espace entre la balise ouvrante et fermante, et elle n'est plus :empty c'est peut-être ton inconnue.
Cdt

Bonjour,

en l'absence d'entête (pas de TH dans ton tableau, pas de 1ère ligne d'entête dans ton image) tu peux aussi bien baliser ça comme une liste de 7 items et ce sera plus facile à styler.
D'un point de vue accessibilité, vu que d'une part certains lecteurs d'écran décident que "c'est plus un tableau" au moindre display: qqch sur TR/TH/TD (kikoo iOS ) et que donc il n'y a pas de TH d'autre part, ce sera pas une perte voire mieux restitué.
Modifié par Felipe (07 Feb 2024 - 17:03)