Setting the table to display: block
I like it when my table behaves like a block element. I can't set it to width: 100% because it has some padding, this will result in 100% + PX paddings.
Check out: http://jsfiddle.net/LScqQ
Finally the table does what I want, can you see the box-shadow? But table kids don't like it ^^
I think TH inside THEAD is the problem. They don't get an aspect ratio of 66% to 33%.
Do you need help...
source to share
Finally I found the answer myself.
Place your table inside a wrapper container and write a CSS rule like this:
// HTML
<div class="wrapper_full">
<table>...</table>
</div>
// CSS
.wrapper_full > table
{
width: 100%;
}
Now the table will no longer overflow your layout and fits perfectly like most elements do.
source to share
Your table should be display: table
. If you're worried about sizing, use box-sizing: content-box
.
The reason is that display: table
the layout engine creates the table, rows and columns must be laid out; under certain conditions, if the required elements are not present, they will be implicitly created, but this can cause problems. (You can test this by creating a table div
and setting them in display: table
, table-row
, table-cell
, which are the default style of the user agent table
, tr
and td
if you play with disabling styles in a div in different combinations, you will see that sometimes the browser implicitly makes the wrong table format. )
So, always leave the styles display: table-*
intact if you want the actual layout of the table. Sort your width issues using appropriate styles for that. If you are better at describing what you want, you may be able to get a better answer.
source to share