tbody width not automatically extending to width of table

Question

Take a look at this example here:

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

And the red tables under "Specifications" is not becoming the full width of the containing it - when inspecting on Firebug, the div is not 220 pixels, but rather, just over a 100 pixels based on the content width.

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

The CSS code looks like this:

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

I know there is a generic CSS resetter, and I think that's what's causing the problem. Unfortunately I can't go and just remove the reference to it because multiple sites refer to it from the same location at this moment, and I can't just make that change without careful review. So I need a way to override it on the stylesheet itself. The reset CSS being called is:

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

Answer 1

you should just add

display: table; 

under this selector:

#listing_specs table { } 

Answer 2

You can use this code

tbody{     width: 100%;     display: table; }