CODEWITHSUNDEEP
htmlcss
Fred
Fred

Reputation: 57

text in table cells not centered as in headers

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. I don't know why table rows are skewed to the left and cannot be aligned right below to the headers.

enter image description here

Upvotes: 0

Views: 139

Answers (2)

erickb
erickb

Reputation: 6309

You can add this to your css:

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

You need the td prefix cause your th is using the same css class.

I hope that helps.

Upvotes: 0

Thanos
Thanos

Reputation: 3059

First of all you forgot to close the td after the first input.

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

You can add this css to make them center

td
{
    text-align:center;    
}

Have a look on this EXAMPLE

Upvotes: 2

Related Questions