【发布时间】：2013-02-15 23:00:24
【问题描述】：
我有一张桌子，第一行 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
【问题讨论】：
-
按照其他人的建议添加一个colspan，jsfiddle.net/UqPXw/2
-
这不是对表格的适当使用。是的，您的数据是表格的，但它应该表示为每行一条记录，而不是每个单元格一条记录。
-
如何重新格式化表格：codepen.io/cimmanon/pen/qCrcu
标签： html css html-table tablecolumn