看看這個例子在這裏:TBODY寬度不會自動延伸到表的寬度
和「規格」下的紅表不成爲包含它的整個寬度 - 檢查時在Firebug上,div不是220像素,而是基於內容寬度超過100像素。
<div class="grid_4 alpha">
<table width="100%" class="grid_4 alpha omega">
<tr class="specrow">
<td class="specname">type:</td>
<td class="specvalue">House</td>
</tr>
<tr class="specrow">
<td class="specname">year:</td>
<td class="specvalue">1986</td>
</tr>
</table>
</div>
的CSS代碼如下:
#listing_specs table {
width: 100%;
}
#listing_specs table tbody {
display: table-row-group;
width: 100%;
}
.specrow {
margin:2px 0px;
border-bottom:1px dotted #dadada;
color: #fff;
width: 100%;
background-color: #A92229;
}
.specrow:hover {
background-color:#fff;
color:#333;
}
.specname{
font-weight: 600;
padding:2px 2px 2px 5px;
width: 50%;
white-space: nowrap;
}
.specvalue {
font-weight:normal;
padding:2px 5px 2px 5px;
text-align:left;
width: 50%;
}
我知道有一個通用的CSS復位器,我認爲這就是造成問題。不幸的是,我不能去,只是刪除引用它,因爲多個網站在這個時候從同一地點引用它,我不能不經過仔細審查就做出這一改變。所以我需要一種方式來覆蓋樣式表本身。被調用的復位CSS是:
<link rel="stylesheet" type="text/css" media="all" href="http://demo.brixwork.com/master/css/reset.css" />
哇。如此簡單而有效。謝謝! – jeffkee
花了一分鐘的時間來登錄,因爲它節省了我很多時間。 – MAK
是的,我用它顯示:inline-block - 但我可以用display:inline-table代替 – Fanky