CODEWITHSUNDEEP
htmlcss
Nick
Nick

Reputation: 59

Why cant I inherit the parent's width with my table?

For some reason i cant inherit the parent's width with a table element

FIDDLE

CSS: 

body {
    margin:0;
}
#main_wrap {
    max-width:1000px;
    height:400px;
    border-style:groove;
    margin:0 auto 0 auto;
}
#menu {
    width:inherit;
    height:50px;
    border-style:double;
}
#menu table {
    width:inherit;
    height:inherit;
    background-color:rgba(255, 0, 4, 1.00);
}
#menu2 {
    width:inherit;
    height:50px;
    border-style:double;
}
#test {
    width:inherit;
    height:inherit;
    background-color:rgba(255, 0, 4, 1.00);
}

HTML:

    <div id="main_wrap">
    <div id="menu">
        <table>
            <td>a</td>
            <td>a</td>
            <td>a</td>
            <td>a</td>
            <td>a</td>
        </table>
    </div>
    <div id="menu2">
        <div id="test"></div>
    </div>
</div>

The inheritance works when I inherit to a div element in the same circumstance. Cant a table inherit from an element which properties are already inherited? Why is it working with div, but not with the table?

Upvotes: 4

Views: 9617

Answers (3)

user1835565
user1835565

Reputation: 141

Table and Div do not have the same behaviour. If you add css to your table : display: block; you'll see it has the same behaviour. But you will lose the table behaviour though. That explains the difference between the 2 exemples.

Upvotes: 1

rob
rob

Reputation: 734

YOu shoud add width: 100% to the main container.

#main_wrap {
    width: 100%;
    max-width:1000px;
    ....
}

JSFiddle: http://jsfiddle.net/robcabrera/D262Z/

Upvotes: 1

ohlando
ohlando

Reputation: 331

I believe the issue occurs because the table is not a block element. A table's width cannot be inherited and is determined solely on set width or the width of content. Adding a width of 100% will get you the desired results.

width: 100%;

Upvotes: 7

Related Questions