html - CSS alignment difficulty -
this question has answer here:
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> i want table rows (clothes information & prices) aligned right below table headers. meaning, want centered. don't know why table rows skewed left , cannot aligned right below headers.
even tried td { text-align: center; }, doesn't work.
help appreciated, thank you.

left align th header elements. center align td elements doesn't pretty.
th.one { text-align:left; } th.two { text-align:left; } th.three { text-align:left; } .one { width: 13%; } .two { width: 30%; } .three { width: 30%; }
Comments
Post a Comment