html - 表格单元格中的文本不像标题那样居中

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>

我希望表格行（衣服信息和价格）在表格标题下方对齐。我不知道为什么表格行向左倾斜并且不能与标题右下方对齐。

Answer 1

首先，您忘记在第一次输入后关闭 td 。

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

您可以添加此 css 以使它们居中

td
{
    text-align:center;    
}

看看这个示例

Answer 2

您可以将其添加到您的 CSS：

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

您需要td前缀，因为您th使用的是相同的 css 类。

我希望这会有所帮助。