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

Question

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?

Answer 1

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

Answer 2

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

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

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