Having a table-cell stretch

HTML & CSS
1

I’m making a “table” using CSS and DIVs and I’m needing one of the cells to stretch while the others are fixed. The code looks a little something like this right now, and I’m wanting “anotherCell” to stretch to fill up the remaining space.

`



Test

Testing

Testing

`

.myTable { display: table; width: 100%; } .myRow { display: table-row; } .myRow div { display: table-cell; } .aCell { width: 100px; } .andAnotherCell { width: 100px; }

I’m not sure what to set for the width (if anything) for “anotherCell”.

1 Like
2

Just leave it unset and it should fill the remaining space left by the others.

Tip:
If you only want one row, you don’t need the row container.

1 Like
3

I may have thousands of rows. I was just using one as a simple example.

I am leaving it unset and it’s not stretching. It’s making it the minimum width possible. The table isn’t stretching 100% it doesn’t seem either.

4

Don’t forget to add vertical-align:top to that rule or the items will align on the baseline and could look odd if images are involved.

Yes that’s the beauty of cells and they don’t need widths as all the cells in a row must always equal the width of the parent row. This means that if you give a width to one cell then the other cells will still stretch to fill the available space. Even if you did size all three cells to be smaller than the table width the browser would call that ‘over-constrained’ and ignore the dimension on one of the cells to allow it to extend to the width of the table.

5

Well, I have a width of 100% on both the table and table-row classes and it still doesn’t seem to be stretching the one cell. The two cells with explicit widths look like they should but the cell with no width is as small as possible.

6

Ugh. Nevermind. I had the “table” div set with an ID instead of a class and I wasn’t referring to it properly in CSS. Problem fixed. Thanks!

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.