tbody चौड़ाई स्वचालित रूप से तालिका की चौड़ाई का विस्तार नहीं

Question

इस उदाहरण यहाँ पर एक नज़र डालें:

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

और "विनिर्देशों" के अंतर्गत लाल तालिकाओं यह युक्त की पूरी चौड़ाई बनने नहीं है - जब निरीक्षण फायरबग पर, 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> 

सीएसएस कोड इस तरह दिखता है:

#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%; 
} 

मैं जानता हूँ कि एक सामान्य सीएसएस resetter है, और मुझे लगता है कि क्या समस्या खड़ी कर रहा है। दुर्भाग्य से मैं नहीं जा सकता और केवल इसके संदर्भ को हटा सकता हूं क्योंकि इस साइट पर कई साइटें उसी स्थान से संदर्भित होती हैं, और मैं सावधानीपूर्वक समीक्षा किए बिना उस परिवर्तन को नहीं कर सकता। तो मुझे स्टाइलशीट पर इसे ओवरराइड करने का एक तरीका चाहिए। रीसेट सीएसएस कहा जा रहा है:

<link rel="stylesheet" type="text/css" media="all" href="http://demo.brixwork.com/master/css/reset.css" /> 

Answer 1

आप सिर्फ इस चयनकर्ता के अंतर्गत

display: table; 

जोड़ना चाहिए:

#listing_specs table { } 

Answer 2

तालिका को प्रदर्शित होता है: इनलाइन;

यह होना चाहिए: प्रदर्शन: तालिका;

हिस्सा प्रदर्शन 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; 
}