ancho tbody que no se extiende automáticamente al ancho de la tabla

Question

Tome un vistazo a este ejemplo aquí:

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

Y las tablas rojas en "Especificaciones" no se está convirtiendo en todo el ancho de la que lo contiene - al inspeccionar en Firebug, el div no es de 220 píxeles, sino algo más de 100 píxeles en función del ancho del contenido.

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

código de la CSS se ve así:

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

Sé que hay un resetter de CSS genérico, y creo que eso es lo que está causando el problema. Lamentablemente, no puedo ir y simplemente elimino la referencia porque varios sitios se refieren a ella desde la misma ubicación en este momento, y no puedo hacer ese cambio sin una revisión cuidadosa. Entonces necesito una manera de anularlo en la hoja de estilo en sí misma. El restablecimiento de CSS que se está llamando es:

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

Answer 1

sólo debe añadir

display: table; 

bajo este selector:

#listing_specs table { } 

Answer 2

La tabla hereda la visualización: en línea;

Debe ser: display: table;

La parte cousing el display: inline es:

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