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.

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.

Answer 2

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.