表格单元格与子输入宽度相同（键入文本）

如何强制包含文本类型输入的表格单元格水平拉伸并与其子输入宽度相同？ （子输入的宽度可能会发生变化，而不是固定的）。

代码如下：

.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>

 

在这里检查一下： 正如您所看到的，包含跨度的单元格会增长，但包含输入的单元格不会增长。

http://jsfiddle.net/atL9f32q http://jsfiddle.net/atL9f32q

鉴于样式表的所有魔力，在某些情况下您仍然需要使用 javascript 来解决问题：

http://jsfiddle.net/u6szxkp1/ http://jsfiddle.net/u6szxkp1/

不像 css 那样优雅，但可以工作。

HTML 标记：

<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 样式：

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

JavaScript 逻辑：

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);