28092 sujets

CSS et mise en forme, CSS3

Bonjour à tous et à toutes,

J'ai un tableau avec des horaires :
upload/1707300400-40463-horairesavant.png
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 :
upload/1707299976-40463-horairesresultatsouhaite.png
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 :
upload/1707300670-40463-horairescssnico.png

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 Smiley merci

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)
Modérateur
Bonjour,

Tu peux éventuellement passer tes td en block pour qu'elles se superposent.
Exemple à tester

td:empty {display:none;}
tr:has(:not(td:empty)) td~td {display:block}


Voici un codepen pour tester le résultat : https://codepen.io/gc-nomade/pen/OJqwZPj
Cdt
Modifié par gcyrillus (07 Feb 2024 - 13:55)
Meilleure solution
Bonjour gcyrillus,

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

*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 Smiley merci pour ton aide.

Bonne journée Smiley cligne
Modérateur
spip93 a écrit :
.... ex : la pseudo-classe empty ne fonctionnait pas pour une raison inconnue ...

Bonne journée Smiley cligne

Bonne journée à toi aussi Smiley smile
Il suffit d'un simple espace entre la balise ouvrante et fermante, et elle n'est plus :empty Smiley cligne c'est peut-être ton inconnue.
Cdt
Administrateur
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 Smiley confus ) 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)