J'ai deux tables côte à côte. J'ai besoin des lignes à aligner, mais parfois le contenu peut être plus long que la ligne du tableau en raison des restrictions de largeur sur la page et il se brise et fait une ligne de table à deux lignes.Lignes de tableau avec deux lignes de texte
Est-il possible de faire quelque chose comme des doubles lignes qui peuvent contenir deux lignes de texte afin que tout s'aligne, peu importe si le contenu est 1 ou 2 lignes?
Vous pouvez ajouter un (minimum) hauteur aux lignes de table ou des cellules (bien que cela ne fonctionnera pas dans les anciens navigateurs comme IE6) avec quelque chose comme:
tr {
min-height: 2em;
}
ou
tr {
min-height: 24px;
}
Si vous avez besoin de travailler de la même manière dans IE6, vous pouvez ajouter 'height: ...' à la place.
Espérons que cela aide!
Donnez la hauteur de TD: 2.5em ou si (vous devrez jouer avec cette valeur, dépend d'autres params comme les marges/rembourrages/line-height vous utilisez
Vous pouvez résoudre ce 2 façons,. un serait de créer des lignes avec une hauteur fixe comme vous le proposez, l'autre solution serait de créer une grande table avec 3 colonnes où vous supprimez les frontières de la colonne du milieu afin qu'il ressemble à 2 tables
La solution vous demandaient pourrait être comme suit:
<style>
td { vertical-align: top; }
td div { height: 40px; overflow: hidden; }
</style>
<table width="400">
<tr>
<td><div>short content</div></td>
<td><div>long content long content long content long content</div></td>
<td><div>long content long content long content long content</div></td>
</tr>
<tr>
<td><div>long content long content long content long content</div></td>
<td><div>short content</div></td>
<td><div>long content long content long content long content</div></td>
</tr>
</table>
+1, en utilisant une grande table qui combine les deux tables plus petites est l'approche la plus fiable. – molf
Vous pouvez utiliser la hauteur minimale piratage rapide pour contourner le problème IE6: http://www.dustindiaz.com/min-height-fast-hack/ –
-1, car si à un moment donné vous vous retrouvez avec 3 lignes, il se cassera à nouveau. L'utilisation d'une grande table comme suggéré dans une autre réponse est plus fiable. – molf
La requête était spécifique à deux lignes - je ne vois pas comment 'overflow hidden' est une meilleure solution car elle cacherait le texte, le cassant de façon plus négative pour l'utilisateur. Aussi, j'essaie de garder la structure du HTML identique car il n'est pas toujours facile de le changer. Il pourrait être «meilleur», mais ne peut pas toujours être fait. Je crois que cette solution est moins intrusive. – ylebre