2010-12-01 19 views
1

Cela m'a rendu fou, malheureusement haha. Je ne peux pas comprendre pourquoi je ne peux pas faire les "X" dans ma table aligner avec le bas de la table ... J'ai essayé de mettre vertical-aligner à différents endroits dans le CSS, mais en vain :(. Je suis également en utilisant correctement pour les taches blanches dans ma table?Pourquoi "Vertical-align: bottom" ne fonctionne pas sur cette table

Voici cisaille mes deux fichiers HTML et CSS ... les commentaires seraient grandement appréciés

<html> 
<head> 
<title>Day4: Table King</title> 
<link rel="stylesheet" type="text/css" href="stylesday4.css" /> 
</head> 

<body> 
<table id="products"> 
    <tr> 
    <th><span></th> 
<th>Free Version</th> 
<th>Lite Version</th> 
<th>Full Version</th> 
</tr> 
<tr> 
    <td>Advertising</td> 
    <td id="td">X</td> 
    <td><span></td> 
    <td><span></td> 
</tr> 
<tr class="alt"> 
    <td>Catering Software</td> 
    <td><span></td> 
    <td id="td">X</td> 
    <td id="td">X</td> 
</tr> 

....

#products 
{ 
border-collapse:collapse; 
width:100%; 
} 
#products th, #products td 
{ 
border:1px solid #0000FF; 
background-color:#C0C0C0; 
padding:3px 2px 7px 5px; 
} 
#products th 
{ 
font-size:20px; 
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
color:#0000FF; 
padding-top:4px; 
padding-bottom:5px; 
background-color:green; 
} 
#products td 
{ 
vertical-align:bottom; 
} 
#products tr 
{ 
text-align:center; 
color:#0000FF; 
} 
#products tr.alt td 
{ 
color:blue; 
background-color:#A7C942; 
} 

Répondre

1

Avec le code HTML et CSS, vous avez fourni l'alignement vertical semble fonctionner comme je pense. J'ai mis en place un petit test sur jsfiddle ici http://jsfiddle.net/dttMd/. J'ai mis quelques sauts de ligne dans la première rangée pour confirmer que le texte suivant était l'alignement inférieur. Si ce n'est pas ce que vous cherchez, pourriez-vous clarifier exactement ce dont vous avez besoin? En ce qui concerne les cellules vides, ce que vous faites est erroné puisque <span> les éléments doivent avoir une étiquette de fermeture. Ma préférence personnelle est juste de mettre dans un &nbsp; dans les cellules. Je ne pense pas qu'il y ait vraiment un "bon" chemin bien que nécessairement (bien que je sois heureux d'être corrigé).

2

Vous pouvez utiliser position: relative sur votre td et table, puis déplacez le td vers le bas en utilisant bottom: 0px.

Cependant, je pense que ce site devrait répondre à votre question un peu plus clairement: http://shouldiusetablesforlayout.com

1

c'est parce que vous avez un rembourrage inférieur 7px dans le td. Vous pouvez le changer en

padding:3px 2px 0 5px; 

et l'espacement est parti.

http://jsfiddle.net/6AAvH/2/

-1

Vous pouvez simplement ajouter valign="bottom" dans chaque td et cela rendra le contenu à aligner en bas et est pris en charge par tous les navigateurs dans le monde!

Espérons que cela pourrait vous aider.

0

Le rembourrage peut perturber la disposition et la hauteur/largeur. Débarrassez-vous du rembourrage de votre td et donnez-lui une hauteur à la place. Parfois, la hauteur de la ligne peut donner l'impression qu'elle ne s'aligne pas sur le haut ou le bas de l'image. Si la taille de votre police est inférieure à celle de son conteneur, la hauteur de la ligne peut être héritée. Si vous définissez la hauteur de la ligne à la taille de la police (ou juste line-height: 1) et donnez td une hauteur, cela devrait faire l'affaire.

<td height="18" valign="bottom" style="font-size:9px; line-height:9px;">TEXT</td> 

Votre <span> manque la fermeture </span>, et vous ne devriez pas utiliser une période pour prendre l'espace, car il est un élément en ligne. Pour les tables, vous n'avez même pas besoin d'un espace réservé, mais si vous êtes plus à l'aise, vous pouvez utiliser &nbsp; ou si vous voulez hériter d'un style de remplissage/marge, vous pouvez utiliser cet élément (<p>&nbsp;</p> ou <h3>&nbsp;</h3>).