title: HTML input inside table cell
body: <p>I have a table that will contain many columns and I would like to add <code>input</code> fields inside header cells, but I would like for the input to fit the width depending on the body content.</p>
  <p>This is how it looks like without the <code>input</code> fields:
  <a href="https://i.stack.imgur.com/1GhEd.png" rel="noreferrer"><img src="https://i.stack.imgur.com/1GhEd.png" alt="enter image description here" /></a></p>
  <p>And this is how it looks like with the <code>input</code> fields:</p>
  <p>As it can be seen, columns like 'index' and 'Is Active' are taking too much space, and I would like to maintain the first layout as much as possible. I tried to set input width to 100% and auto, but it doesn't seem to help very much.</p>
  <p>The current css looks like:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.table {
    font-family: Arial, Helvetica, sans-serif;
  }
  
  .table thead {
    position: sticky;
    top: 0;
  }
  
  .table thead th {
    border: 1px solid #e4eff8;
    background: white;
    cursor: pointer;
  }
  
  .table thead th.header-label {
    cursor: pointer;
    background: linear-gradient(0deg, #e4eff8, #4578a2 5%, #e4eff8 150%);
    color: white;
    border: 1px solid white;
  }
  
  .table th,
  .table td {
    padding: 0.2rem 0.5rem;
    text-align: center;
  }
  
  .table td {
    border: 1px solid #e4eff8;
  }
  
  .table input {
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="table"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th class="header-label"&gt;Index&lt;/th&gt;
        &lt;th class="header-label"&gt;Name&lt;/th&gt;
        &lt;th class="header-label"&gt;Phone&lt;/th&gt;
        &lt;th class="header-label"&gt;Company&lt;/th&gt;
        &lt;th class="header-label"&gt;Registered&lt;/th&gt;
        &lt;th class="header-label"&gt;Is Active&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;th&gt;&lt;input type="number"&gt;&lt;/th&gt;
        &lt;th&gt;&lt;input type="string"&gt;&lt;/th&gt;
        &lt;th&gt;&lt;input type="string"&gt;&lt;/th&gt;
        &lt;th&gt;&lt;input type="string"&gt;&lt;/th&gt;
        &lt;th&gt;&lt;input type="date"&gt;&lt;/th&gt;
        &lt;th&gt;&lt;input type="boolean"&gt;&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;0&lt;/td&gt;
        &lt;td&gt;Paige Bean&lt;/td&gt;
        &lt;td&gt;+1 (871) 458-2959&lt;/td&gt;
        &lt;td&gt;MOREGANIC&lt;/td&gt;
        &lt;td&gt;2018-12-27T11:28:50 -01:00&lt;/td&gt;
        &lt;td&gt;false&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;1&lt;/td&gt;
        &lt;td&gt;Knox Holman&lt;/td&gt;
        &lt;td&gt;+1 (880) 497-2808&lt;/td&gt;
        &lt;td&gt;MAINELAND&lt;/td&gt;
        &lt;td&gt;2017-05-07T02:54:22 -01:00&lt;/td&gt;
        &lt;td&gt;false&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;Brandy Colon&lt;/td&gt;
        &lt;td&gt;+1 (969) 513-2827&lt;/td&gt;
        &lt;td&gt;NEXGENE&lt;/td&gt;
        &lt;td&gt;2017-06-07T06:42:31 -00:00&lt;/td&gt;
        &lt;td&gt;true&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;3&lt;/td&gt;
        &lt;td&gt;Suzette Austin&lt;/td&gt;
        &lt;td&gt;+1 (863) 445-3604&lt;/td&gt;
        &lt;td&gt;JETSILK&lt;/td&gt;
        &lt;td&gt;2015-10-24T11:10:41 -01:00&lt;/td&gt;
        &lt;td&gt;true&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;4&lt;/td&gt;
        &lt;td&gt;Downs Cain&lt;/td&gt;
        &lt;td&gt;+1 (822) 574-2617&lt;/td&gt;
        &lt;td&gt;INSECTUS&lt;/td&gt;
        &lt;td&gt;2017-10-19T08:18:09 -01:00&lt;/td&gt;
        &lt;td&gt;true&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;5&lt;/td&gt;
        &lt;td&gt;Michael Yang&lt;/td&gt;
        &lt;td&gt;+1 (875) 492-3905&lt;/td&gt;
        &lt;td&gt;DELPHIDE&lt;/td&gt;
        &lt;td&gt;2016-08-15T01:31:55 -01:00&lt;/td&gt;
        &lt;td&gt;false&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>So how do you make this happen with pure css, without hard coding the width of each column?</p>
  <p><a href="https://i.stack.imgur.com/WuVlc.png" rel="noreferrer"><img src="https://i.stack.imgur.com/WuVlc.png" alt="enter image description here" /></a></p>