1

我有一张桌子,第一行 4 项(一个 tr,4 td),第二行 1 项(另一个 tr,1 td)

我希望第二行项目居中对齐,所以我希望底行的 td 宽度为 100% 以填充 tr,但它不起作用。这是我当前的代码:

<table style="width:100%;">
<tbody><tr>
<td style="padding:20px 5px 5px 5px; text-align:center;">
<div style="height:75px; width:75px; border-color:#8AAEA4; border-style:solid; border-width:2px; display: block; margin-left:auto; margin-right:auto;">
<img height="75px" width="75px" src="/images/icons/default.jpg"></div><form style="display:inline; margin:0; padding:0; " action="/dashboard/shop_window/" method="post" onsubmit="return confirm('Are you sure?');">
<input type="hidden" name="action" value="tcd.profile.delete.shop.window.item">
<input type="hidden" name="item_id" value="">
<input class="add_to_sw" style="cursor: pointer; cursor: hand; background-color:#FFF;" type="submit" value="Delete">
</form>
</td>
<td style="padding:20px 5px 5px 5px; text-align:center;">
<div style="height:75px; width:75px; border-color:#8AAEA4; border-style:solid; border-width:2px; display: block; margin-left:auto; margin-right:auto;">
<img height="75px" width="75px" src="/images/icons/default.jpg"></div><form style="display:inline; margin:0; padding:0; " action="/dashboard/shop_window/" method="post" onsubmit="return confirm('Are you sure?');">
<input type="hidden" name="action" value="tcd.profile.delete.shop.window.item">
<input type="hidden" name="item_id" value="">
<input class="add_to_sw" style="cursor: pointer; cursor: hand; background-color:#FFF;" type="submit" value="Delete">
</form>
</td>
<td style="padding:20px 5px 5px 5px; text-align:center;">
<div style="height:75px; width:75px; border-color:#8AAEA4; border-style:solid; border-width:2px; display: block; margin-left:auto; margin-right:auto;">
<img height="75px" width="75px" src="/images/icons/default.jpg"></div><form style="display:inline; margin:0; padding:0; " action="/dashboard/shop_window/" method="post" onsubmit="return confirm('Are you sure?');">
<input type="hidden" name="action" value="tcd.profile.delete.shop.window.item">
<input type="hidden" name="item_id" value="">
<input class="add_to_sw" style="cursor: pointer; cursor: hand; background-color:#FFF;" type="submit" value="Delete">
</form>
</td>

<td style="padding:20px 5px 5px 5px; text-align:center;">
<div style="height:75px; width:75px; border-color:#8AAEA4; border-style:solid; border-width:2px; display: block; margin-left:auto; margin-right:auto;">
<img height="75px" width="75px" src="/images/icons/default.jpg"></div><form style="display:inline; margin:0; padding:0; " action="/dashboard/shop_window/" method="post" onsubmit="return confirm('Are you sure?');">
<input type="hidden" name="action" value="tcd.profile.delete.shop.window.item">
<input type="hidden" name="item_id" value="">
<input class="add_to_sw" style="cursor: pointer; cursor: hand; background-color:#FFF;" type="submit" value="Delete">
</form>
</td>
</tr>
<tr>
<td style="background-color: #FF0000; width:inherit; padding:10px 5px 5px 5px; text-align:center;">
<div style="height:75px; width:75px; border-color:#8AAEA4; border-style:solid; border-width:2px; display: block; margin-left:auto; margin-right:auto;">
<img height="75px" width="75px" src="/images/icons/default.jpg"></div><form style="display:inline; margin:0; padding:0; " action="/dashboard/shop_window/" method="post" onsubmit="return confirm('Are you sure?');">
<input type="hidden" name="action" value="tcd.profile.delete.shop.window.item">
<input type="hidden" name="item_id" value="">
<input class="add_to_sw" style="cursor: pointer; cursor: hand; background-color:#FFF;" type="submit" value="Delete">
</form></td>    
</tr>
</tbody></table>

谁能看到我做错了什么?

这是jsfiddle:JSFIDDLE

4

3 回答 3

1

最简单的方法是将colspan属性/属性添加到td标签。像这样:

<td style="background-color: #FF0000; width:inherit; padding:10px 5px 5px 5px; text-align:center;" colspan="4">

更新了小提琴链接。

于 2013-03-01T12:32:13.303 回答
1

您需要添加colspan="4"到最后td

<td colspan="4" style="background-color: #FF0000; width:inherit; padding:10px 5px 5px 5px; text-align:center;">
于 2013-03-01T12:32:27.930 回答
0

查看您的代码, colspan 只会在特定时间解决。如果您将另一个项目放在第二行中,则需要在第二行中为两个单元格使用 colspan="2"。

一个好的解决方案是使用表格的 div、span 和 css。

于 2013-03-01T13:26:29.757 回答