0

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>

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

甚至尝试过 td { text-align: center; }，但不起作用。

帮助将不胜感激，谢谢。

在此处输入图像描述

4

6 回答 6

1

左对齐th标题元素。您也可以将td元素居中对齐，但它看起来不那么漂亮。

th.one {
     text-align:left;   
}
th.two {
     text-align:left;   
}
th.three {
     text-align:left;   
}
.one {
    width: 13%;
}

.two {
    width: 30%;
}

.three {
    width: 30%;
}
于 2013-08-01T02:33:41.150 回答
1

嘿，看看这个演示，希望它对你

有用链接
这些是你必须在你的CSS部分做的唯一改变：

.one {
    width: 1%;
    text-align:center;
     }

.two {
     width: 10%;
     text-align:center;
     }

.three {
    width: 10%;
    text-align:center;
       }

我得到的输出是这样的：

上述代码的输出。
我希望这是你想要的。

于 2013-08-01T03:51:23.587 回答
0

问题是你想要一些左对齐的东西在中心对齐的东西下面排列。您最好的选择可能是左对齐标题并使用一些填充来提供列之间的空间。

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>

和 CSS：

.one {
    width: 13%;
}

.two {
    width: 30%;
}

.three {
    width: 30%;
}
th {
    text-align: left;
}
.two, .three {
    padding-left: 10%;
}

例如：http: //jsfiddle.net/cpmmk/

在此处输入图像描述

于 2013-08-01T02:32:14.020 回答
0

添加text-align:center;到 css 类。

.one {
    width: 13%;
    text-align:center;
}

.two {
    width: 30%;
    text-align:center;
}

.three {
    width: 30%;
    text-align:center;
}

或添加

td
{
   text-align:center;
}
于 2013-08-01T04:06:44.417 回答
0

你应该让<th>元素左对齐：

th {
    text-align:left;
}

此外，您应该考虑使用<colgroup>带有嵌套<col>标签的标签来设置表格列的样式，如下所示：

<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

这样，您不必将“class”属性添加到 ALLLLL <td>s。

于 2013-08-01T02:45:12.567 回答
0

那是你要的吗？演示http://jsfiddle.net/yyene/u7WzM/2/

右对齐，居中。

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%;
}
于 2013-08-01T03:56:12.353 回答