En HTML, je souhaite afficher un petit tableau dans le cadre d'un paragraphe. Une façon de faire est la suivante:
<table>
<tr>
<td>
Before
<table style="display:inline;"><tr><td>a</td><td>b</td></tr> <tr><td>c</td><td>d</td></tr> </table>
After
</td>
</tr>
</table>
qui produit cette belle mise en page:
a b
Before After
c d
qui est exactement ce que je veux.
Mais il me semble plutôt ridicule d’utiliser un tableau à l’intérieur d’un tableau alors que ce que je veux vraiment, c’est utiliser un tableau dans un paragraphe. Cependant, si j'essaie d'utiliser ce code HTML:
<p>
Before
<table style="display:inline;"><tr><td>a</td><td>b</td></tr> <tr><td>c</td><td>d</td></tr></table>
After
</p>
Je reçois cette mise en page moche:
Before
a b
After
c d
J'ai essayé d'utiliser différents styles d'affichage, mais aucun ne semble faire ce que je veux.
Suis-je obligé d'utiliser le code table-dans-table ou manque-t-il quelque chose?
Faire le paragraphe display: inline;
fonctionne pour moi. Mais si vous avez plusieurs paragraphes, vous devrez ajouter un <br />
après chacun d’eux.
Vous pouvez utiliser le css suivant:
display:inline-table
seulement IE7 et ci-dessous ne supportent pas cette propriété. Envelopper probablement la table dans une étendue avec zoom:1
appliqué pourrait aider IE7.
J'utilise le navigateur Chrome sous Linux et je peux le faire en ajoutant display:inline-table
aux balises paragraph (p) et table:
<p style="display:inline-table;">
Before
<table style="display:inline-table;"><tr><td>a</td><td>b</td></tr> <tr><td>c</td><td>d</td></tr></table>
After
</p>
Je viens de vérifier Firefox sous Linux et cela semble fonctionner là aussi.
FYI: La suppression de l’un des deux styles display:inline-table
donnait un formatage indésirable.
Je suppose que vous avez une bonne raison d’utiliser une table ici au lieu de css. Vous pouvez obtenir l'effet en utilisant une seule table.
<table>
<tr>
<td rowspan="2">Before</td>
<td>a</td>
<td>b</td>
<td rowspan="2">After</td>
</tr>
<tr>
<td>c</td>
<td>d</td>
</tr>
</table>