Position relative not working with display table-cell?

Question

I\'ve created a horizontal menu composed of buttons. I need these buttons to resize in width so that together they occupy 100% of the width of the menu container. It should

Answer 1

Remove right, bottom, top and left positioning from the #menu .button Button

For Instance,

#menu .button Button {
    position: absolute;
    /*right: 0px;
    bottom: 0px;
    top: 0px;
    left: 0px;*/
}

Here is the WORKING DEMO

If you want pure display:table-cell; solution, you just need to remove the positioning

For Instance,

#menubar {
    width: 100%;
    height: 100%;
    display: table;
    table-layout: fixed;
}
#menu {
    display: table-row;
}
#menu .button {

    display: table-cell;
}
#menu .button Button {

    right: 0px;
    bottom: 0px;
    top: 0px;
    left: 0px;
}

Here is the WORKING DEMO - 2

EDIT

To stretch the buttons to occupy the width, here is the solution.

The Code:

#menu .button Button {
    width: 100%;
}

Here is the WORKING DEMO - 3

EDIT - 2

As per the request of the OP to imply a provision to add a height to the buttons, here is the solution for the same. The addition of height:100%; is the OP's contribution to this solution.

#menu .button Button {
    display:table-cell;
    width: 100%;
    height:100%;
}

Here is the WORKING DEMO - 4