html - online - El ancho del cuerpo no se extiende automáticamente al ancho de la mesa

metatag maker

Question

Mire 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án convirtiendo en el ancho total del contenido. Al inspeccionar en Firebug, el div no es de 220 píxeles, sino algo más de 100 píxeles según el 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>

El código 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 restablecimiento 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 llama es:

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

Answer 1

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

Debería ser: display: table;

La parte que codifica la pantalla: en línea 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;
}

Answer 2

Puedes usar este código

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

Answer 3

solo debes agregar

display: table;

debajo de este selector:

#listing_specs table { }