it-swarm.com.ru

ширина тела не распространяется автоматически на ширину стола

Посмотрите на этот пример здесь:

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

И красные таблицы в разделе «Технические характеристики» не становятся полной шириной его содержимого - при проверке в Firebug, div не 220 пикселей, а чуть более 100 пикселей в зависимости от ширины содержимого. 

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

Код CSS выглядит следующим образом:

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

Я знаю, что есть универсальный CSS Resetter, и я думаю, что это является причиной проблемы. К сожалению, я не могу пойти и просто удалить ссылку на него, потому что несколько сайтов ссылаются на него из одного и того же места в данный момент, и я не могу просто внести это изменение без тщательной проверки. Поэтому мне нужен способ переопределить его в самой таблице стилей. Вызываемый CSS для сброса: 

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

вы должны просто добавить 

display: table;

под этим селектором:

#listing_specs table { }
90
Aatif Farooq

Таблица наследует отображение: встроенное;

Должно быть: display: table;

Часть, вызывающая отображение: inline:

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

Вы можете использовать этот код

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