Colspan rowspan table-cell equivalent

Bonjour

il n'y a pas de rowspan ni colspan pour les div display:table-cell savez vous s'il y a une astuce pour contourner ce problème?

merci
Modifié par polpaulin (20 Mar 2011 - 13:42)

Bonjour,

Utiliser un tableau ? Ou revoir la structure de la page ?

si je pose la question c'est pour pas utiliser un tableau justement, les table n'ont jamais été fait pour ça
la structure je peux toujours revoir bien entendu

merci

Bonjour polpaulin,

polpaulin a écrit :
les table n'ont jamais été fait pour ça

Qu'entends-tu par "pour ça", car tu ne le dis pas dans ton premier post ?

Cordialement

les TABLE sont fait pour des contenus répétitifs comme des tableaux excel par exemple, pas pour la structure des sites

Tout à fait d'accord, nous savons cela aussi
Cela ne nous dit pas ce que tu comptes faire ...

ce que je compte faire ?

ma question était simple un remplacement de rowspan et colspan , un astuce ? rien d'autre

sinon je privilégie http://forum.alsacreations.com/topic-4-54553-1-Template-layout-height-probleme.html

Ma boule de cristal annonce "regarde sous la troisième racine du chène... tu sauras lequel".


En gros, sans savoir ce que tu veux faire (et en nous prenant pour des idiots, merci au passage), impossible de t'aider...

c'est vrai que de ce point de vue les forums francophones sont assez homogènes ... helas
Modifié par polpaulin (21 Mar 2011 - 08:46)

Bonjour,

si tu avais précisé "je veux un rendu tabulaire à l'aide de CSS uniquement", ça aurait évité quelques incompréhensions je pense (non, on est jamais assez précis quand on pose une question )

Le W3C parle de table-column-group comme valeur possible de display
http://www.w3.org/TR/CSS2/visuren.html#display-prop
ce qui est normal vu que les navigateurs savent comment rendre une colonne de tableau par défaut. Est-ce que l'intégrateur peut l'utiliser ça j'en sais rien, je te laisse essayer, mais c'est une piste.

polpaulin a écrit :
Bonjour

il n'y a pas de rowspan ni colspan pour les div display:table-cell savez vous s'il y a une astuce pour contourner ce problème?

merci

bonjour,

Sur le fond non.

http://www.w3.org/TR/CSS21/tables.html#value-def-table

http://www.w3.org/TR/CSS21/tables.html#value-def-table a écrit :
User agents may ignore these 'display' property values for HTML table elements, since HTML tables may be rendered using other algorithms intended for backwards compatible rendering. However, this is not meant to discourage the use of 'display: table' on other, non-table elements in HTML.

Enfin , les class(ou autre selecteurs) permettent des surcharges css ici et la.
Les framework de type Grid css peuvent t'inspirer.

Cordialement

merci je vais regarder ça

Bonjour,

Je déterre le sujet.

Presque 10 ans plus tard la question me semble sans réponse, sauf bidouilles plus ou moins compliquées.

Pas d'équivalent à colspan ou rowspan en display: table ?

Non
J'ai rencontré le même problème, j'ai posé la même question et reçu le même genre de réponse.
J'ai une structure de ce type:

<table>
  <tr><td>aaa</td><td>bbb</td><td>ccc</td></tr>
  <tr><td colspan="3">un commentaire</td></tr>
  <tr><td>ddd</td><td>eee</td><td>fff</td></tr>
</table>

Il n'est pas possible de rendre cela autrement, ou du moins je n'ai pas trouvé comment...

Bonjour,

J'ai lu pas mal de trucs sur le modèle de table et le sujet de colspan et rowspan n'est jamais abordé, comme s'il n'avait pas d'importance.

contents pose de groooos problèmes d'accessibilité (niveau : y en a plus du tout clap clap les navigateurs…) m'enfin pas avec des div et des span vu qu'il n'y a à la base pas de sémantique du tout avec ces 2 éléments (ce qui est une bonne chose quand un bout d'info ne doit pas en avoir en particulier, que c'est apporté par un élément parent mais une mauvaise chose quand on avait une liste ul/li…).

Si la table au départ était purement de présentation (pas de TH par exemple), autant virer les TR : l'élément remplaçant table devient le grid container, les éléments remplaçant les TD deviennent les grid items.
Il y a ensuite de quoi s'amuser avec la foultitude de techniques apportées par Grid Layout (et Flexbox en multi-ligne, éventuellement). Prévoir une petite courbe d'apprentissage (promis c'est moins bizarre que float et clear détournés pendant 15 ans pour de la mise en page ) et de s'aider des Devtools de Firefox pour voir ce qui se passe.

Hello, il me semble que display:contents n'a pour ainsi dire d'usage que dans le cas de telle structure (profusion de wrapper) , coté accessibilité, je ne comprends pas le soucis, rien ne disparait. il ne s'agit que de style et d'appliquer un modèle de type flex ou grid sur une structure avec une imbrication excessive.

On ne peut pas toujours enlever (ou faire une refonte complète) du document ces élément afin que chaque élément de la grille soit frère, display:contents permet de le faire et permet aussi de vérifier que c'est bien ce que l'on veut faire avant d'aller toucher au HTML. @support et @media permettent aussi de filtrer plein de choses, et au final , ces éléments ne sont peut-être pas inutiles selon les résolutions ciblés.

l'essentielle de ma réponse était de dire que des élément dans une grille sur le modèle grid, peuvent être étaler sur plusieurs colonnes ou lignes en CSS comme on peut le faire dans un tableau. pour bien faire, on peut se servir d'une class ou pour valider son code et faire la transition , un attribut similaire à celui utilisé dans les tableaux : data-rowspan et data-colspan .

En bref, Oui colspan et rowspan existe aujourd'hui en CSS, mais pas encore pour tous, colspan a faillit avec column(CSS) mais pour grid(display) c'est bien en place
Modifié par gcyrillus (11 Jun 2019 - 16:29)

Ça ne devrait ne pas avoir d'effet puisque comme tu le dis il ne s'agit que de style mais l'implémentation actuelle (*) dans Chrome et Firefox fait que c'est inutilisable : ils se sont bien vautrés genre bug1 ou bug2…
Et c'est bien dommage parce que ne pas avoir à imposer une structure linéaire (tous grid items) et du "relocate JS" pour qu'une inté puisse respecter toutes les contraintes design selon la résolution, ça devrait a priori moins impacter l'accessibilité

(*) en 2018, je vois que des bugs ont été corrigés entre temps. À tester au cas par cas dans l'onglet Accessibility tree