tbody width not automatically extending to width of table

Question

Take a look at this example here:

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

And the red tables under "Specifications" is not becoming the full width of the containing it - when inspecting on Firebug, the div is not 220 pixels, but rather, just over a 100 pixels based on the content width.

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

The CSS code looks like this:

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

I know there is a generic CSS resetter, and I think that's what's causing the problem. Unfortunately I can't go and just remove the reference to it because multiple sites refer to it from the same location at this moment, and I can't just make that change without careful review. So I need a way to override it on the stylesheet itself. The reset CSS being called is:

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

score 129 · Accepted Answer · answered Jul 03 '12 at 17:26

129

you should just add

display: table;

under this selector:

#listing_specs table { }

answered Jul 03 '12 at 17:26

Aatif Farooq

1,828
1
13
15

yep i spoiled it with display: inline-block - but i could have used display: inline-table too instead – Fanky May 31 '17 at 12:08

score 20 · Answer 2 · answered May 30 '18 at 13:49

20

You can use this code

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

answered May 30 '18 at 13:49

Rostyslav Kulchytskyi

303
3
6

This was the good answer for me – Paul ALBERT Jul 06 '22 at 09:35
This helped me, and the `width:100%` is important if you have two tables inline and you want to center them – JORGE GARNICA Sep 01 '22 at 04:12

score 11 · Answer 3 · edited Jul 02 '13 at 09:31

11

The table inherits display:inline;

It should be: display:table;

The part cousing the display:inline is:

.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;
}

edited Jul 02 '13 at 09:31

Lukasz Koziara

4,274
5
32
43

answered Jul 03 '12 at 17:22

René

6,006
3
22
40

Ah i see the conflict there. Thanks! – jeffkee Jul 03 '12 at 23:27

tbody width not automatically extending to width of table

3 Answers3