How do I get a <table> with fixed-width columns to fill the entire width of its container?

Question

I have an HTML page with a section across the middle of it. This horizontal section uses a <table> and has a custom background image that needs to repeat horizontally across the entire section. This table has 5 elements in it. These elements are statically sized to 140px.

My problem is, I can't get the image to repeat across the remaining space. It's as if the table doesn't stretch the entire width. However, if I set the table width to 100%, the table cells grow beyond 140px.

What do I do? I want the table to fill the entire space. But I want my cells to remain a constant size, and I want the background image to be used.

Thank you!

Answer 1

Add a 6th cell and don't specify any width. This will keep the 5 cells at 140px and the 6th cell will be stretched to the end when table width is set to 100%.

Answer 2

Consider wrapping the middle section in a div and applying the background image to the div. Then set the width of your td elements in the table to 140px.

Here is an example. Clearly, you will need to reference your image instead of flurries.png (which is not part of the fiddle so it does not show).

Answer 3

A <table> is only as big as the cells inside it. So, if you’ve got 5 cells, each 140 pixels wide, the table will only be 700 pixels wide: it won’t stretch across the full width available to it.

You could wrap the <table> in a <div> and put the repeating background image on the <div>, if the 6th cell solution doesn’t work or isn’t preferable.

Answer 4

The sizes of background images are irrelevant to CSS, no help there. Maybe you can hack something in JavaScript, otherwise you will have to know how large your background image is.