When working with variable amounts of data displayed as columns in a table, I struggled to maintain fixed widths for each column. Despite my efforts, the columns would stretch based on available space rather than obeying the specified widths.
For example, in this sandbox: https://codesandbox.io/s/frosty-sid-ceugx?file=/src/App.js
I discovered that by removing the column width from just one table, all other columns adhered to their set widths except the one without a specified width.
As shown in this example sandbox: https://codesandbox.io/s/sweet-flower-wuq2b?file=/src/App.js
How can I ensure that all columns maintain their widths and prevent the table from stretching to fill the entire width? Keep in mind that I want to avoid setting a total table width since it varies based on the loaded data.