How is extra width in a table divided up among columns?

StackOverflow https://stackoverflow.com/questions/22178267

  •  03-06-2023
  •  | 
  •  

Question

I was wondering today how it is that excess space in an HTML table (above and beyond what the content is requesting) is split among the columns. Surprisingly I couldn't find the answer even after a good deal of googleing. So I quickly mocked up the simplest possible page and put it to the test.

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

The result (in google chrome) looks like this: how extra space is allocated in a table

Based on that it seems that browsers allocate the additional space proportionally. Giving columns a percentage of the additional space proportional to the amount of space they originally requested. With that in mind, this post serves three purposes:

  1. A place where this behavior is documented for others to find
  2. I'm wondering, is this true for all browsers? (try it on yours)
  3. And here's the real question, is there a way to use CSS to change this behavior? Specifically to have the browser allocate the extra width evenly among the columns?

No correct solution

OTHER TIPS

You can probably change the horizontal space allocation by applying flexbox CSS rules. Check out http://the-echoplex.net/flexyboxes/ and play around with the first number in the "flex" attribute. That number determines what elements get what extra space and how much.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top