title: CSS / HTML Table: How to autogrowth a column width based on the text value of the input element
body: <p>I have a table on React (Using AntD); but it doesn't matter for the question... </p>
  
  <p>The issue is, that I want that cells of a specific column render text inputs... that this it's fine.</p>
  
  <p>But, if I render only text inside the <code>td</code> element, the HTML table auto-width the column based on the longest value in the table... but if I render an <code>input</code> the auto-width doesn't work.
  I don't want to fix the column width (using px or %); I want the column with the <code>inputs</code> auto-growth depending on the longest value in the cells.</p>
  
  <p>Here is the code:</p>
  
  <p><a href="https://codesandbox.io/s/keen-browser-v54fh?file=/src/columnsRender.js" rel="nofollow noreferrer">https://codesandbox.io/s/keen-browser-v54fh?file=/src/columnsRender.js</a></p>
  
  <p>This is a screenshot:</p>
  
  <p><a href="https://i.stack.imgur.com/ebHVd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ebHVd.png" alt="Example 1"></a></p>
  
  <p>This is another example:</p>
  
  <p><a href="https://i.stack.imgur.com/d4kJ2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/d4kJ2.png" alt="Example 2"></a></p>
  
  <p>In the first example; looks almost good...
  In the second; it's so much space in the first column (The second column fits perfectly based on the data or in the header).</p>
  
  <p>So, it's possible that a <code>td</code> element understand the width of an <code>input</code> element and automatically fixes the width of the column in the table?
  Or exists any workaround?</p>