html - tbody 宽度不会自动扩展到表格的宽度

Question

看看这个例子:

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 重置器，我认为这就是导致问题的原因。不幸的是，我不能去删除对它的引用，因为此刻有多个站点从同一位置引用它，而且我不能在没有仔细审查的情况下就进行更改。所以我需要一种方法来在样式表本身上覆盖它。被调用的重置 CSS 是:

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

Answer 1

你应该只添加

display: table;

在此选择器下:

#listing_specs table { }