I have a table that fills 100% of its container. The first two columns have a minimum width of 40px, while the last header cell is set to width: 100% so the first columns stay as narrow as their content allows. Each data cell contains a text input. When a user types text that is wider than anything previously entered in a column, can I make the browser recalculate the table layout and expand that column automatically? Ideally, I'd like a CSS-only solution.
1 Answer
Try applying `field-sizing: content` to the inputs. It allows the input width to follow its content, which can cause the table column to recalculate as the user types. It’s a neat CSS-only solution, but browser support is still limited, so check compatibility for your target browsers.
If you need broader browser support, a common fallback is a hidden element that mirrors the input’s value. Use JavaScript to measure that element and update the input or column width as the text changes.
That works perfectly for my use case—thanks!