28172 sujets

CSS et mise en forme, CSS3

Display:table

Bonjour à tous,

Je me suis dit que j'allais utiliser les propriétés CSS display:table... pour réaliser la mise en page d'un nouveau site.

Cela se passe bien mais je n'ai pas compris comment fusionner plusieurs cellules... Je pense qu'il faut utiliser display:table-row-group par exemple mais comment concrètement ?

pour faire l'équivalent de :

<table>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td colspan="2" rowspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>



Merci d'avance, la plupart des tutoriels ne parlent pas de ceci...
La bonne technique pour coller fusionner plusieurs cellules est... celle que tu proposes.
Il s'agit là de la structure de ton tableau, non de sa mise en forme.
Noisequik a écrit :
Je pense qu'il faut utiliser display:table-row-group par exemple mais comment concrètement ?


Salut, j'ai trouvé sur w3schools ceci à propos de la valeur table-row-group pour la propriété display :

w3schools a écrit :
The element will behave like a table row group.


Donc, je ne suis pas convaincu de ce que j'avance, et je n'ai fait aucun test, mais je pense que cette propriété permet juste de faire un affichage tel qu'il serait si ton élément était un groupe de ligne...

En gros, je pense que ce code :

<section style="display : table-row-group">
    <p>Ma ligne 1</p>
    <p>Ma ligne 2</p>
</section>


serait plus ou moins interprété comme s'il s'agissait de :

<table>
    <tr><td>Ma ligne 1</td></tr>
    <tr><td>Ma ligne 2</td></tr>
</table>


Ce qui n'est pas l'effet recherché.

Edit : après test, l'affichage n'est pas tout à fait semblable entre les deux versions, toutefois, cela ne fusionne en rien les cellules.
Modifié par Gothor (30 Dec 2011 - 09:44)
D'abord, bonne année à tous Smiley biggthumpup

Voici un exemple de ce que je souhaitais faire :

upload/147-exemple2.png


Comme le site est un portail, je souhaitais faire de belles cases qui arriveraient à la même hauteur, d’où mon envie d'essayer display:table.

Il est évident que je n'utiliserai pas <table> pour faire une mise en page...

Jusqu'à présent, j'utilisais inline-block.

S'il n'y a pas moyen de fusionner des cellules, je devrais faire un tableau css par ligne.
Sujet clos
Aller à