CSS alignment difficulty [duplicate] - html

Question

This question already has answers here:
text in table cells not centered as in headers
(2 answers)
Closed 8 years ago.
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 the table rows (clothes information & prices) to be aligned right below the table headers. Meaning, I want it to be centered. I don't know why table rows are skewed to the left and cannot be aligned right below to the headers.
Even tried
td { text-align: center; }, but doesn't work.
Help would be appreciated, thank you.

Answer 1

Left align the th header elements. You could also center align the td elements but it doesn't look as 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%;
}

Answer 2

Hey see this demo hope it works for you
link
These are the only changes you have to do in your CSS part :
.one {
width: 1%;
text-align:center;
}
.two {
width: 10%;
text-align:center;
}
.three {
width: 10%;
text-align:center;
}
The output that i got was like this :
I hope this is what you want .

Answer 3

you should make the <th> elements align left:
th {
text-align:left;
}
Also, you should consider using the <colgroup> tag, with nested <col> tags to style your table columns, as such:
<table>
<colgroup>
<col class="one" />
<col class="two" />
<col class="three" />
</colgroup>
<tr>
<th>Quantity</th>
<th>Info</th>
<th>Price</th>
</tr>
<tr>
<td><input type="text" name="quantity1" value=""/>
<td>Cheap Monday Jeans 30/34 </td>
<td>$39.99 </td>
</tr>
...rest of the code
This way, you don't have to add the "class" attribute to ALLLLL the <td>s.

Answer 4

Is that what you want? DEMO http://jsfiddle.net/yeyene/u7WzM/2/
Right align, and center.
th.one, td.one {
text-align:center;
}
th.two {
text-align:center;
}
td.two {
text-align:right;
padding-right:5%;
}
th.three, td.three {
text-align:center;
}
.one {
width: 13%;
}
.two {
width: 30%;
}
.three {
width: 30%;
}

Answer 5

Add text-align:center; to the css classes.
.one {
width: 13%;
text-align:center;
}
.two {
width: 30%;
text-align:center;
}
.three {
width: 30%;
text-align:center;
}
Or add
td
{
text-align:center;
}

Answer 6

The problem is that you want something left aligned to line up beneath something center aligned. Your best bet is probably to left align the headings and using some padding to provide space between the columns.
HTML:
<table>
<tr>
<th class= "one">Quantity</th>
<th class= "two">Info</th>
<th class= "three">Prices</th>
</tr>
<tr>
<td class = "one"><input type="text" name="quantity1" value=""/></td>
<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>
And CSS:
.one {
width: 13%;
}
.two {
width: 30%;
}
.three {
width: 30%;
}
th {
text-align: left;
}
.two, .three {
padding-left: 10%;
}
For example: http://jsfiddle.net/cpmmk/