html - online - El ancho del cuerpo no se extiende automáticamente al ancho de la mesa
metatag maker (3)
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;
}
Mire este ejemplo aquí:
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" />
Puedes usar este código
tbody{
width: 100%;
display: table;
}
solo debes agregar
display: table;
debajo de este selector:
#listing_specs table { }