TD寬度不改變CSS HTML

我有一個表，第一行4個項目（一個TR，4 TD的），第二行1項（另一個TR，1個TD）TD寬度不改變CSS HTML

我想在第二行項目居中對齊，所以我希望底部行的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

來源

2013-03-01 cwiggo

加合併單元格被別人的建議，http://jsfiddle.net/UqPXw/2/ – Anil 2013-03-01 12:33:07

這是不恰當的使用表。是的，您的數據是表格式的，但它應該表示爲每行一條記錄，而不是每個單元一條記錄。 – cimmanon 2013-03-01 13:37:34

如何重新格式化表格：http://codepen.io/cimmanon/pen/qCrcu – cimmanon 2013-03-02 01:04:39

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

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

來源

2013-03-01 12:32:27 harpax

完全忘了這一點，非常感謝！信譽++; – cwiggo 2013-03-01 12:34:12

最簡單的方法將是colspan屬性/屬性添加到td標籤。像這樣：

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

Updated小提琴鏈接。

來源

2013-03-01 12:32:13 hjpotter92

你的代碼來看，合併單元格將只解決在一定的時間。如果您在第二行放置另一個項目，則需要在第二行使用colspan =「2」來存放兩個單元格。

一個很好的解決方案是使用表格的div，span和css。

來源

2013-03-01 13:26:29 korogui

TD寬度不改變CSS HTML

回答

相關問題