J'ai temporairement hérité de la responsabilité de s'occuper de la partie frontale de notre projet car notre mainteneur Web vient de partir et il n'y a pas encore de remplacement (et je suis un étudiant d'été de toute façon, alors je pars bientôt aussi ...). Je ne suis pas très expérimenté avec HTML/CSS/etc, et j'ai quelques problèmes pour obtenir une table formatée comme les patrons l'aimeraient. Le tableau HTML/CSS (coupé vers le bas autant que je pense que je peux) est la suivante:Obtenir l'en-tête/légende centrée au-dessus du tableau à 2 colonnes
<html>
<head>
<style type="text/css">
/* Old CSS from web-guy before me */
h5 {
font-size: 150%;
color: #878796;
font-family: Arial,Helvetica,sans-serif;
}
.details-container {
border-right : 1px;
border-right-color:#F6F6F6;
float:left;
}
.title-details h5 {
text-align: center;
margin: 0px;
margin-bottom: 5px;
margin-top: 5px;
}
/* From here on it is mostly my CSS */
table.center {
margin-left:auto;
margin-right:auto;
}
.details-column-left{
text-align:right;
padding-right:2px;
}
.details-column-right{
text-align:left;
padding-left:2px;
}
</style>
</head>
<body>
<div class="details-container">
<div class="title-details">
<h5>Details</h5>
</div>
<div class="details">
<table class="center">
<tr>
<th class="details-column-left">Title</th>
<td class="details-column-right">Prince</td>
</tr>
<tr>
<th class="details-column-left">Name</th>
<td class="details-column-right">Vlad III the Impaler</td>
</tr>
<tr>
<th class="details-column-left">Nationality</th>
<td class="details-column-right">Romanian</td>
</tr>
<tr>
<th class="details-column-left">Job</th>
<td class="details-column-right">General</td>
</tr>
<tr>
<th class="details-column-left">Extremely Long Header Text</th>
<td class="details-column-right">Equally Long Value Text</td>
</tr>
<tr>
<th class="details-column-left">Header</th>
<td class="details-column-right">Value</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Le texte dans le tableau (qui est, le texte des cellules d'en-tête et le texte des cellules standard) est généré server- côté basé sur une base de données, de sorte que les valeurs peuvent être assez longues ou très courtes (avec une longueur maximale raisonnable). Les patrons le veulent comme suit:
- Les deux colonnes doivent être justifiées les unes contre les autres au milieu, avec un petit espace entre elles.
- La table doit être développée de sorte que tout le texte de chaque cellule se trouve sur la même ligne.
- Le titre ("Détails") doit toujours être centré entre les deux colonnes, quel que soit le rapport des largeurs (car elles seront normalement d'environ 60:40).
Je pense avoir réussi à capturer 1 et 2 d'accord - ce tableau devrait augmenter si vous ajoutez plus th/td s, et il devrait également devenir plus petit si vous les supprimer - mais je suis aux prises avec le numéro 3. Je ne suis pas sûr de savoir comment le faire du tout. J'ai essayé d'utiliser un <caption>, mais cela n'a pas aidé - il est toujours centré au-dessus de la table entière, pas centré au-dessus de la division de la colonne. Donc, j'apprécierais toute aide pour que la table ait l'air 'correcte'. Le seul navigateur attendu est apparemment Firefox, versions 2 à 3.5 (bien que poussant 3.5 sur 2 surtout). Je m'excuse si j'ai manqué des informations importantes - s'il vous plaît juste demander et je vais l'ajouter.
EDIT:
Screenshot (lignes rouges juste pour le centre de correction, pas vraiment sur la table IRL):
Je doute que cela est possible en CSS. Je voudrais dire que la position du titre dépendrait de la taille des éléments suivants, quelque chose que CSS rarement con faire. Une solution avec JavaScript serait possible. – RoToRa