web-dev-qa-db-fra.com

la largeur de la caisse ne s'étend pas automatiquement à la largeur de la table

Jetez un oeil à cet exemple ici:

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

Et les tableaux rouges sous "Spécifications" ne deviennent pas toute la largeur du contenu - lors de l'inspection sur Firebug, la div n'est pas de 220 pixels, mais plutôt d'un peu plus de 100 pixels en fonction de la largeur du contenu. 

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

Le code CSS ressemble à ceci:

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

Je sais qu'il existe un resetter générique CSS, et je pense que c'est ce qui cause le problème. Malheureusement, je ne peux pas simplement supprimer la référence car plusieurs sites s'y réfèrent du même endroit pour le moment, et je ne peux pas simplement apporter ce changement sans un examen approfondi. J'ai donc besoin d'un moyen de le remplacer sur la feuille de style elle-même. La réinitialisation CSS appelée est la suivante: 

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

vous devriez juste ajouter 

display: table;

sous ce sélecteur:

#listing_specs table { }
90
Aatif Farooq

La table hérite de display: inline;

Il devrait être: display: table;

La partie à l'origine de l'affichage: inline est:

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

Vous pouvez utiliser ce code

tbody{
    width: 100%;
    display: table;
}
0
Rostyslav Kulchytskyi