Setting a table to display: block

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

Your table should be display: table. If you're worried about the sizing, use box-sizing: content-box.

The reason is that display: table creates the table layout mechanism the rows and columns need to be laid out; in certain conditions if the required elements aren't there, they will be implicitly created, but it can cause problems. (You can test that out by making a table layout with divs and setting them to display: table, table-row, table-cell, which are the default user agent styles for table, tr, and td elements. If you play around with unsetting the styles on the divs in different combinations, you'll see that sometimes the browser implicitly makes the table layout incorrectly.)

So, always leave the display: table-* styles intact if you want an actual table layout. Sort out your width issues using the appropriate styles for that. If you describe better what you want, maybe you can get a better answer.

Answer 2

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.