Table cell same width as child input (type text)

Question

How to force a table cell containing an input of type text, to stretch horizontally and be the same width as its child input? (Where the child input is subject to change width, not fixed).

Code below:

.wrap {
  width: 100%;
  overflow-x: scroll;
}
table {
  min-width: 100%;
  width: auto;
}
td {
  border: 1px solid #000;
  padding: 10px;
  white-space: nowrap;
}
input {
  width: 100%;
}

 

<div class="wrap">
  <table>
    <tr>
      <td>
        <input type="text" value="testing 123 testing 456 testing 789">
      </td>
      <td>
        <span>Column 2 testing 1234567890 testing 1234567890 testing 1234567890</span>
      </td>
      <td>
        <span>Column 3 testing 1234567890 testing 1234567890 testing 1234567890</span>
      </td>
    </tr>
  </table>
</div>

Check it here: As you can see, cells containing spans grow but the one containing the input doesn't.

http://jsfiddle.net/atL9f32q

First, remove `width:100%` from `input` and then follow the instructions of a SO question: [How to set input width depending on the content](https://stackoverflow.com/questions/3392493/adjust-width-of-input-field-to-its-input) — FZs, Dec 30 '18 at 08:26
@FZs this is not reliable solution, if somehow font-size somehow change then it will fail to provide you expected output. — Hanif, Dec 31 '18 at 18:15

score 1 · Answer 1 · answered Dec 30 '18 at 08:33

Given all the magic of style sheets there situations where you still need to nail things using javascript:

http://jsfiddle.net/u6szxkp1/

Not elegant like css, but working.

HTML markup:

<div class="wrap">
  <table>
    <tr>
      <td>
        <input id="flex-input" type="text" value="testing 123 testing 456 testing 789">
      </td>
      <td>
        <span>Column 2 testing 1234567890 testing 1234567890 testing 1234567890</span>
      </td>
      <td>
        <span>Column 3 testing 1234567890 testing 1234567890 testing 1234567890</span>
      </td>
    </tr>
  </table>
</div>

CSS styles:

.wrap {
  width: 100%;
  overflow-x: scroll;
}
table {
  width: auto;
}
td {
  border: 1px solid #000;
  padding: 10px;
  white-space: nowrap;
}

JAVASCRIPT logic:

function resizable (el, factor) {
  var int = Number(factor) || 7.7;
  function resize() {el.style.width = ((el.value.length+1) * int) + 'px'}
  var e = 'keyup,keypress,focus,blur,change'.split(',');
  for (var i in e) el.addEventListener(e[i],resize,false);
  resize();
}
resizable(document.getElementById('flex-input'),5.6);

score 0 · Answer 2 · answered Dec 30 '18 at 09:26

If you set width: 100% for input, the browser will detect it as min-width: auto (by default) and reduce the input width as the table content expands.

You can use min-width: 100% style for input to force a table cell containing an input of type text.

* { box-sizing: border-box }

.wrap {
  width: 100%;
  overflow-x: scroll;
}
table {
  min-width: 100%;
  width: auto;
}
td {
  border: 1px solid #000;
  padding: 10px;
  white-space: nowrap;
}
input {
  min-width: 100%;
}

 

<div class="wrap">
  <table>
    <tr>
      <td>
        <input type="text" value="testing 123 testing 456 testing 789">
      </td>
      <td>
        <span>Column 2 testing 1234567890 testing 1234567890 testing 1234567890</span>
      </td>
      <td>
        <span>Column 3 testing 1234567890 testing 1234567890 testing 1234567890</span>
      </td>
    </tr>
  </table>
</div>

@trs What doesn't work about this? Works for me on chrome. What browser are you using? — dgrogan, Dec 31 '18 at 17:00

score 0 · Answer 3 · answered Dec 31 '18 at 16:59

Remove the input { width: 100% }

.wrap {
  width: 100%;
  overflow-x: scroll;
}
table {
  min-width: 100%;
  width: auto;
}
td {
  border: 1px solid #000;
  padding: 10px;
  white-space: nowrap;
}

 

<div class="wrap">
  <table>
    <tr>
      <td>
        <input type="text" value="testing 123 testing 456 testing 789">
      </td>
      <td>
        <span>Column 2 testing 1234567890 testing 1234567890 testing 1234567890</span>
      </td>
      <td>
        <span>Column 3 testing 1234567890 testing 1234567890 testing 1234567890</span>
      </td>
    </tr>
  </table>
</div>

Table cell same width as child input (type text)

3 Answers3

Linked