表单元格中的文本不位于标题中央 [英] 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.

推荐答案

首先你忘了关闭第一个输入后的td。

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

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

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

You can add this css to make them center

td
{
    text-align:center;    
}

查看 示例

Have a look on this EXAMPLE

这篇关于表单元格中的文本不位于标题中央的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！