Search code examples
csswidthcss-tables

Setting a table to display: block

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...

Solution

  • 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.