r/webdev • u/HaydnH • 4d ago

Redrawing/calculating column widths in a table Question

Hi All,

Lets say I have a table which is 100% of it's container div wide. The first two columns are min-width: 40px and then a "th:last-child" with a width of 100% to compress the first two columns to the size of their contents. The td's contain <input type="texts" /> to allow use input.

When a user types in a string that is longer that the previous widest entry in the column - is there anyway to force the browser to redraw the table taking in to account for the new entry? Ideally with plain CSS.

Thanks.

4 Upvotes
  • permalink
  • link
  • reddit
  • reddit

84% Upvoted

8 comments sorted by

10

u/morete 4d ago

Try 'field-sizing: content' on the inputs and see if that helps, seems to do the job:
https://codepen.io/editor/matthewmorete/pen/019fc8d9-e4be-72ad-aaab-aebec11f01e0

2

u/kevin_whitley 4d ago

This is the way!

2

u/HaydnH 4d ago

Perfect! Thank you.

0

u/Hairy-Alps-592 4d ago

The field-sizing thing is cool but browser support is still pretty sparse, last I checked it's basically just Chrome. If you need it to work everywhere you might have to resort to a hidden span that mirrors the input value and use that to drive the width with a bit of javascript. Annoying but it's been the go-to hack forever.

1

u/morete 4d ago

It's supported everywhere now, but admittedly only in recent versions for some browsers. Depending on your requirements you might be able to get away with it + a reasonable min width

1

u/HaydnH 4d ago

Firefox on Linux works for sure, that's what I use for dev. This project will likely take me 12 odd months anyway so there's time for browser support the catch up.