28111 sujets

CSS et mise en forme, CSS3

Display:table, table-row, table-cell, table-caption, etc.

Bonjour à tous
Je n'arrive pas à trouver une solution simple au problème suivant/
Le site d'une chorale contient des liens pour afficher le programme de travail d'une répétition sous la forme suivante:
upload/1541502647-48769-prog-05-11.png
Dont la présentation est codée sous la forme suivante:

.progbox {   /* la <div> qui contient cette table */
    position:absolute;
	z-index:10;
       right:40%;
	background-color: #dddddd;
	padding:0.5em;
	border:2px solid rgb(196, 170, 47);
	border-radius:0.5em;
        white-space: nowrap;
	display:none;
}
.progbox div.programme {  /* la <div> qui représente cette table */
	display: table;
	padding:0.5em;
        font-size: 0.8em;
        border-spacing: 0;
	min-width:20em;
}
div.programme h2 { /* le titre */
	display: table-caption;
	font-size:1.3em;
	color:black;
	font-weight:normal;
}
div.progitem {display:table-row;background:white;} /* chaque ligne de la table */
div.progitem > * {  /* chaque donnée de la liste (image, auteur, œuvre) */
        display: table-cell;
        padding: 0 0.125em;
        vertical-align:middle;
        background:transparent;
}

Pour le programme de la semaine prochaine, je voudrais remplacer la longue liste des œuvres "déjà vues" par la mention "Révision des œuvres déjà vues"
Pour cela, après plusieurs tâtonnements, j'arrive au résultat suivant:
upload/1541503124-48769-prog-12-11.png
Pour obtenir ce résultat, la ligne en question est codée en HTML:

<div class="progitem"><p></p><p>Révision des œuvres déjà vues</p><p></p></div>

Dans cette façon de coder, le texte "Révision des œuvres déjà vues" et considéré comme étant la 2ème cellule de la ligne et en conséquence la largeur de cette colonne est agrandie pour toutes les lignes de la table.
Bien entendu, je préférerais qu'il n'en soit rien et que ce texte s'étende sur toute la largeur de la ligne, c'est à dire, en codage "à l'ancienne" on ait

<tr><td colspan=3>Révision des œuvres déjà vues</td></tr>


Je pourrais bien entendu changer mon programme de fabrication du HTML pour que tout cela soit une <table>, ce qui de plus sémantiquement ne serait pas idiot, bien entendu, mais avant, j'aimerais savoir si on peut obtenir ce résultat sans utiliser une <table>, en jouant sur le CSS

Merci de votre aide.
Modifié par PapyJP (06 Nov 2018 - 12:33)
Merci pour ta réponse
En fait, cette situation résulte d'une évolution de ce contient cet "objet"
Dans un premier temps, ce n'était que du texte, il y avait donc une balise <p> avec du texte, éventuellement des <br>
Puis j'ai eu besoin de l'utiliser pour y mettre la liste des œuvres de la prochaine répétition
J'ai donc fait une <div> avec <h2> et <ul> <li>
Puis je me suis rendu compte qu'une liste auteur/œuvre était mieux présentée si je mettais tout cela en table, j'ai dont utilisé les display:table et autres.
Mais quand il a fallu ajouter un texte, ça ne marchait pas, comme expliqué ci-dessus.
Pas possible d'utiliser table-caption, car il ne peu y avoir qu'une seule caption dans une table, en tête ou à la fin, elle est déjà occupée par le titre.
Je suis revenu à la seule solution raisonnable: une <table>, avec un <td colspan="3">

Mon point était de savoir, plus par intérêt intellectuel que par besoin, puisque j'avais la solution de tout mettre dans une <table>, si les contempteurs des <table> avaient prévu un moyen faire des équivalents de "colspan". Il semble bien que ce ne soit pas la cas.
bazooka07 a écrit :
Tu devrais envisager sérieusement d'utiliser "display: grid"...

Merci, je vais regarder ça. J’hésite en général à mon âge à me lancer dans l’utilisation de nouvelles fonctionnalités qui sont, de plus, plus ou moins bien supportées par les navigateurs mais ça peut valoir le coup. Sans doute pas dans ce cas précis, qui a « glissé » sémantiquement de quelque chose qui était clairement un texte vers quelque chose qui est devenu une table, mais ça peut me servir dans d’autres cas.
Modifié par PapyJP (07 Nov 2018 - 18:11)
Sujet clos
Aller à