tbody Breite erstreckt nicht automatisch auf die Breite des Tabellen

Question

Werfen Sie einen Blick auf dieses Beispiel hier:

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

und die roten Tabellen unter „Technische Daten“ immer nicht die volle Breite des enthaltenden es - bei der Inspektion Bei Firebug ist das div nicht 220 Pixel, sondern etwas mehr als 100 Pixel basierend auf der Inhaltsbreite.

<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> 

Der CSS-Code sieht wie folgt aus:

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

Ich weiß, es ist eine generische CSS Rücksetzer, und ich denke, das ist, was das Problem verursacht. Leider kann ich nicht einfach den Verweis entfernen, da sich mehrere Sites in diesem Moment von demselben Ort aus beziehen, und ich kann diese Änderung nicht ohne sorgfältige Überprüfung vornehmen. Also brauche ich einen Weg, um es auf dem Stylesheet selbst zu überschreiben. Das zurückgesetzte CSS wird aufgerufen:

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

Answer 1

Sie sollten

display: table; 

unter diesem Selektor nur hinzufügen:

#listing_specs table { } 

Answer 2

Die Tabelle erbt display: inline;

Es sollte sein: Anzeige: Tabelle;

Der Teil cousing das display: inline ist:

.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; 
}