Home How to set an input in a table-header th, without increasing the column-widths?

Questions

How to set an input in a table-header th, without increasing the column-widths?

April 11, 2023

Here’s some table html-code, where the header-widths fit to their contents:

.my-table {
  border: 1px solid;
  border-spacing: 0;
  table-layout: fixed;
  border-collapse: separate;
  box-sizing: border-box;
}
.my-table thead th {
   border-bottom: 1px solid ;
   border-right: solid 1px;
}
.my-table tbody td {
  border-top: none;
  border-left: none;
  border-bottom: 1px dotted;
  border-right:  1px solid;
}

<table class="my-table">
  <thead>
    <tr>
      <th>
        <div>
          ID
        </div>
      </th>
      <th>
        <div>
          Name
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1245</td>
      <td>Michael Knight</td>
    </tr>
    <tr>
      <td>1247</td>
      <td>Devon Miles</td>
    </tr>
  </tbody>
</table>

Now I want to add text-inputs below the headers, but the input should not increase the header-widths. Does anyone know how to achieve this?

.my-table {
  border: 1px solid;
  border-spacing: 0;
  table-layout: fixed;
  border-collapse: separate;
  box-sizing: border-box;
}
.my-table thead th {
   border-bottom: 1px solid ;
   border-right: solid 1px;
}
.my-table tbody td {
  border-top: none;
  border-left: none;
  border-bottom: 1px dotted;
  border-right:  1px solid;
}

<table class="my-table">
  <thead>
    <tr>
      <th>
        <div>
          ID
        </div>
        <div>
          <input type="text">
        </div>
      </th>
      <th>
        <div>
          Name
        </div>
        <div>
          <input type="text">
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1245</td>
      <td>Michael Knight</td>
    </tr>
    <tr>
      <td>1247</td>
      <td>Devon Miles</td>
    </tr>
  </tbody>
</table>

Thanks!

>Solution :

Set the width to 0 then min-width to 100%. Width will shrink it down to no size then, as min-width overrides width (see MDN) it then expands to fit the content. Set box-sizing to border box to accomodate the padding.

.my-table {
  border: 1px solid;
  border-spacing: 0;
  table-layout: fixed;
  border-collapse: separate;
  box-sizing: border-box;
}
.my-table thead th {
   border-bottom: 1px solid ;
   border-right: solid 1px;
}
.my-table tbody td {
  border-top: none;
  border-left: none;
  border-bottom: 1px dotted;
  border-right:  1px solid;
}
.my-table input[type="text"] {
  width:0;
  min-width:100%;
  box-sizing: border-box;
}

<table class="my-table">
  <thead>
    <tr>
      <th>
        <div>
          ID
        </div>
        <div>
          <input type="text">
        </div>
      </th>
      <th>
        <div>
          Name
        </div>
        <div>
          <input type="text">
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1245</td>
      <td>Michael Knight</td>
    </tr>
    <tr>
      <td>1247</td>
      <td>Devon Miles</td>
    </tr>
  </tbody>
</table>