Question

I like to get my table behave like a block element. I cannot set it to width:100% because it does have some padding, this is going to result 100% + the paddings PX.

Check out: http://jsfiddle.net/LScqQ

Finally the table does what I want, can you see the box-shadow? But the table children don’t like it that way^^

I guess the TH inside the THEAD are the problem.
They do not get the aspected ratio of 66% to 33%.

Help wanted…

Answer 1

Finally I found the answer by myself.

Put your table inside a wrapper container and write a CSS rule similar to this:

//HTML

<div class="wrapper-table">
<table>...</table>
</div>

//CSS

.wrapper-table > table
{
    width: 100%;
}

Now the table will no longer overflow your layout and fits perfectly like most elements do.