Have you ever wondered how excess space in an HTML table is distributed among the columns? I too was curious about this, but couldn't find a definitive answer even after extensive searching. Therefore, I decided to create a simple test page to investigate.
<html><head>
<style type="text/css">
td, div{
border: 1px solid black;
}
</style>
</head><body>
<table width=500>
<tr>
<td><div style="width: 200px;">Big td</div></td>
<td><div style="width: 100px;">Small td</div></td>
</tr>
</table>
</body></html>
After running the test (in google chrome), it became apparent that browsers distribute the extra space proportionally among the columns. This means that columns are allocated a percentage of the additional space based on their original size. This discovery led me to wonder:
- This post serves as documentation for others who may encounter the same question.
- Is this behavior consistent across all browsers? (Try testing it on yours)
- Is there a way to modify this allocation using CSS? Specifically, can we make the browser distribute the extra width evenly among the columns?