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 enters text that is wider than anything previously in the column, is there a way to make the browser recalculate and redraw the table layout automatically? Ideally, I'd like to solve this with plain CSS.
1 Answer
Try applying `field-sizing: content` to the inputs. It lets the controls size themselves based on their current text value, which can cause the table columns to grow as the user types. Browser support is still limited, though.
The CSS property is neat, but support may not be consistent across browsers yet. For broader compatibility, a common fallback is a hidden element that mirrors the input value and uses JavaScript to set the input or column width.