Problème lors de l'alignement vertical des éléments des cellules de tableau adjacentes

Question

Je rencontre un gros problème de style avec certaines lignes de tableau. Selon cette capture d'écran:

alt text http://img706.imageshack.us/img706/9852/rowcellswontalign.png

Les cercles bleus et rouges sont des cellules dans une rangée de table (dont la hauteur est 50px). Les deux sont stylés avec "vertical-align: top". Les données du numéro de téléphone (dans le cercle rouge) sont en fait une chaîne délimitée par des tuyaux où j'ai substitué des ruptures HTML pour les tuyaux. Dans le cercle vert, l'étiquette de télécopie est "vertical-align: top", mais la liste actuelle des numéros de télécopie (également délimitée) correspond à l'alignement vertical: milieu.

Ce que je veux, c'est que ces choses soient parfaitement alignées, le numéro de téléphone/fax étant aligné verticalement avec l'étiquette. Est-ce que ma substitution de coupures de tuyaux dans les chaînes de téléphone/fax est la cause de ce problème? Y at-il un moyen que je peux obtenir ce que je veux sans modifications à la table/application de base de données?

Mise à jour: Je l'ai fait en quelque sorte via un rembourrage sur la cellule de table. Je dis en quelque sorte parce que ça a l'air surtout aligné, mais j'ai l'impression que ça ne se passe pas parce que je le veux, mais par hasard. Et que cela me trahira un jour quand j'en aurai besoin.

Answer 1

Essayez le CSS suivant:

table td, table th { 
    vertical-align: top; 
} 

Vous ne devriez probablement pas compter sur valign et tout ça, c'est long depuis été remplacé par CSS.

Answer 2

Vous les appelez labels (comme ils le sont sémantiquement), utilisez-vous également la balise labels? si c'est le cas, vérifiez s'il contient des règles CSS qui gâchent les choses.

1er (bleu/rouge) cela semble bizarre s'ils sont tous les deux valign: top. avez-vous vérifié si l'étiquette a une marge supérieure ou un remplissage, ou une règle css avec vertical-align: middle?

2ème cas (vert), vous aurez besoin de les aligner sur le haut et .. si l'on est moyenne et l'autre en haut vous ne pouvez jamais les aligner ..

Answer 3

Je suis d'accord avec la mise en œuvre de Parrot de CSS pour cela, vous devez également noter que le fait d'avoir des polices et des tailles de police différentes dans les cellules les rendra mal alignées, même avec le même style appliqué à chacune. Si l'alignement est important pour l'apparence de la page que vous créez, je considérerais de séparer à nouveau les données et de faire de chaque numéro de téléphone/fax son propre en-tête avec une ligne d'en-tête "Téléphone" et "Fax" ayant colspan="2".

*------------------------* 
| Phone:     | 
|------------------------| 
| Back: | xxx-xxx-xxxx | 
|------------------------| 
| Front: | xxx-xxx-xxxx | 
|------------------------| 
| Fax:     | 
... etc.    

Et non, la substitution de | avec <br /> aura pas d'effet négatif sur l'apparence des tables, tant qu'il n'y a pas de LEADING | s.