How can I create a dynamic table with variable-sized columns that always fills the parent area, regardless of the number of cells? The goal is to allow scrolling if needed, but ensure the table spans the entire parent space even with few cells.
I've managed to tackle these requirements individually. For making the table larger than the window, I use:
table {
display:flex; //or block
}
Combined with setting width/min-width for the cells.
To make the table as large as the parent container, I add table-layout: fixed; to the parent div. This ensures it occupies 100% of the available space.
However, the issue arises when trying to combine both methods - using display:flex overrides the table-layout property.
The challenge with display:flex is that when cell width is set to auto (as I cannot hardcode it due to varying content and cell count), the cells won't expand to fill the entire parent if there are only a few columns/rows present.
On the other hand, table-layout doesn't consider min-width and compresses cells into the parent, disregarding their minimum size.
Is there a solution to make table-layout:fixed respect cell min-width, or to ensure cells expand to fill the table when using display:flex?