我有一张桌子，第一排4个项目（一个tr，4个td＆＃39; s），第二个第一个项目（另一个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
答案 0 :(得分：1)
最简单的方法是将colspan属性/属性添加到td标记。像这样：
<td style="background-color: #FF0000; width:inherit; padding:10px 5px 5px 5px; text-align:center;" colspan="4">
Updated小提琴链接。
答案 1 :(得分：1)
您需要将colspan="4"添加到最后td：
<td colspan="4" style="background-color: #FF0000; width:inherit; padding:10px 5px 5px 5px; text-align:center;">
答案 2 :(得分：0)
查看您的代码，colspan只会在某个时间解决。如果你在第二行放入另一个项目，你需要在第二行使用colspan =“2”两个单元格。
一个好的解决方案是使用表格中的div，span和css。