texte dans les cellules de table non centrée comme les en-têtes

Question

CSS:

.one { 
    width: 13%; 
} 

.two { 
    width: 30%; 
} 

.three { 
    width: 30%; 
} 

HTML:

<table> 
    <tr> 
     <th class= "one">Quantity</th> 
     <th class= "two">Info</th> 
     <th class= "three">Price</th> 
    </tr> 
    <tr> 
     <td class = "one"><input type="text" name="quantity1" value=""/> 
     <td class = "two">Cheap Monday Jeans 30/34 </td> 
     <td class = "three">$39.99 </td> 
    </tr> 
    <tr> 
     <td class = "one"><input type="text" name="quantity2" value=""/></td> 
     <td class = "two">Herschel Bag (free) </td> 
     <td class = "three">$129.99 </td> 
    </tr> 
    <tr> 
     <td class = "one"><input type="text" name="quantity3" value=""/></td> 
     <td class = "two">Diesel t-shirt (s) </td> 
     <td class = "three">$59.99 </td> 
    </tr> 
    <tr> 
     <td class = "one"><input type="text" name="quantity4" value=""/></td> 
     <td class = "two">Superdry Patrol Lite Jacket (m) </td> 
     <td class = "three">$129.99 </td> 
    </tr> 
    <tr> 
     <td class = "one"><input type="text" name="quantity5" value=""/></td> 
     <td class = "two">I love Canada t-shirt (s) </td> 
     <td class = "three">$19.99 </td> 
    </tr> 
</table> 

Je veux que les lignes de la table (vêtements informations & prix) à aligner juste en dessous des en-têtes de table. Je ne sais pas pourquoi les lignes de table sont inclinées vers la gauche et ne peuvent pas être alignées juste en-dessous des en-têtes.

Answer 1

tout d'abord vous avez oublié de fermer le td après la première entrée.

<td class = "one"><input type="text" name="quantity1" value=""/></td> 

Vous pouvez ajouter cette css pour les rendre centre

td 
{ 
    text-align:center;  
} 

Jetez un oeil sur cette EXAMPLE

Answer 2

Vous pouvez ajouter à votre css:

td.two, td.three { 
    text-align:right; 
} 

Vous avez besoin du td pr efix cause que votre th utilise la même classe css.

J'espère que cela aide.