2012-07-03 101 views
30

看看這個例子在這裏:TBODY寬度不會自動延伸到表的寬度

http://denise.brixwork.com/showlisting/1/8297-Valley-Drive-Alpine-Meadows-Whistler-denise-brown-real-estate

和「規格」下的紅表不成爲包含它的整個寬度 - 檢查時在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" /> 

回答

75

你應該只添加

display: table; 

這個選擇下:

#listing_specs table { } 
+1

哇。如此簡單而有效。謝謝! – jeffkee

+0

花了一分鐘的時間來登錄,因爲它節省了我很多時間。 – MAK

+0

是的,我用它顯示:inline-block - 但我可以用display:inline-table代替 – Fanky

9

該表繼承di​​splay:inline;

它應該是:display:table;

cousing顯示的部分:內聯是:

.grid_1, .grid_2, .grid_3, .grid_4, 
.grid_5, .grid_6, .grid_7, .grid_8, 
.grid_9, .grid_10, .grid_11, .grid_12, 
.grid_13, .grid_14, .grid_15, .grid_16 { 
    display: inline; 
    float: left; 
    position: relative; 
    margin-left: 10px; 
    margin-right: 10px; 
} 
+0

啊我看到有衝突。謝謝! – jeffkee