Question

如何强制包含文本类型输入的表格单元水平延伸并与子输入保持相同的宽度？（子输入内容可能会更改宽度，而不是固定的。）

以下代码：

.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

Answer 1

考虑到样式表的所有魔力，在这种情况下，您仍然需要使用javascript进行修饰：

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

Answer 2

如果您将width: 100%设置为input，浏览器会将其检测为min-width: auto （默认），并随着表内容的扩展减小输入宽度

您可以对min-width: 100%使用input样式来强制包含文本输入的表格单元格。

* { 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>

Answer 3

删除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>

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

3 个答案: