Table 100% Width and Margins
While hacking aboooooot today I found the need for making a table behave like a regular block element. I have a section floated to the right of a table, and the table should occupy the rest of the available spot. Making the table’s width 100% would make it adjust it size according to its parent instead of the available place (.. with margin-right set to the width of the other element + whitespace).
The best solution I’ve found so far is to create a wrapper div around the table, and then setting the table width to 100%. This makes the table adjust its size according to the parent – which now is a block element.
-
<style type="text/css">
-
#wrapper
-
{
-
margin-right: 300px;
-
}
-
-
#right
-
{
-
width: 250px;
-
float: right;
-
}
-
-
table
-
{
-
width: 100%;
-
}
-
</style>
-
-
<div id="right">
-
asd
-
</div>
-
<div id="wrapper">
-
<table>
-
…
-
</table>
-
</div>