it-swarm.com.de

die Körperbreite erstreckt sich nicht automatisch auf die Tischbreite

Sehen Sie sich dieses Beispiel hier an:

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

Und die roten Tabellen unter "Spezifikationen" werden nicht die volle Breite der darin enthaltenen Tabelle. Bei der Untersuchung von Firebug beträgt das div nicht 220 Pixel, sondern nur 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 folgendermaßen 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ß, dass es einen generischen CSS-Resetter gibt, und ich denke, das verursacht das Problem. Leider kann ich den Verweis darauf nicht entfernen, da zu diesem Zeitpunkt mehrere Websites von demselben Standort auf ihn verweisen, und ich kann diese Änderung nicht ohne sorgfältige Überprüfung vornehmen. Ich brauche also eine Möglichkeit, es auf dem Stylesheet selbst zu überschreiben. Das Reset-CSS, das aufgerufen wird, lautet: 

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

sie sollten einfach hinzufügen 

display: table;

unter dieser Auswahl:

#listing_specs table { }
90
Aatif Farooq

Die Tabelle erbt Anzeige: Inline;

Es sollte sein: Anzeige: Tabelle;

Der Teil, der die Anzeige verursacht: 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;
}
9
René

Sie können diesen Code verwenden

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