输入字段后表格单元格变形答案

【问题标题】：Table cells deform after entering input fields输入字段后表格单元格变形
【发布时间】：2018-05-24 12:06:57
【问题描述】：

这与我所拥有的类似：

var btn = document.querySelector('button');
btn.addEventListener('click', function() {
  var tdCollection = document.querySelectorAll('td');
  for (var i = 0; i < tdCollection.length; i++) {
  	var field = document.createElement('input');
    field.setAttribute('type', 'text');
    field.setAttribute('name', 'Field');
    field.setAttribute('value', tdCollection[i].textContent);
    tdCollection[i].innerHTML = "";
    tdCollection[i].appendChild(field);
  }
  
});

td {
  border: 1px solid black;
}

<table>
  <tr>
    <td>A very long text</td>
    <td>tinyTxt</td>
  </tr>
  <tr>
    <td>A very long text</td>
    <td>tinyTxt</td>
  </tr>
</table>
<button name="edit">Edit</button>

我希望表格单元格即使在按下“编辑”按钮后也能保持其原始宽度。将输入字段宽度设置为其父单元格之一将是理想的，但如果无法将字段宽度固定为单元格宽度，也可以将字段宽度调整为其值并使用overflow: hidden。

感谢您的帮助：D

编辑

我试图保留每列的自然宽度，如果有办法，我想避免每列的宽度必须相等。

【问题讨论】：

问题在于输入元素。在您的 CSS 中设置输入的宽度，即 input { width: 2em;} 看看是否有帮助。
@jeff 我认为这不太理想，有些列的全名等长文本，而其他列只有一个数字，因此单元格的宽度已经非常不同。这就是为什么我一直在寻找一种方法来定义输入字段相对于其父单元格的宽度。
看看这个例子。这一切都在 CSS 中。 codepen.io/rhroyston/pen/dXdPEx
@RonRoyston 您的示例使所有列的宽度与table-layout:fixed; 相等，我试图保留每列的自然宽度。
在这个例子中哪里有输入元素？

标签： javascript html css html-table html-input

【解决方案1】：

您可以为td 和附加到td 的input 设置固定的高度和宽度。

试试下面的方法：

var btn = document.querySelector('button');
var cellWidth = document.getElementById('myTable').rows[0].cells[0].offsetWidth;
var cellHeight = document.getElementById('myTable').rows[0].cells[0].offsetHeight;
console.log(cellHeight)
btn.addEventListener('click', function() {
  var tdCollection = document.querySelectorAll('td');
  for (var i = 0; i < tdCollection.length; i++) {
  	var field = document.createElement('input');
    field.setAttribute('type', 'text');
    field.setAttribute('name', 'Field');
    field.setAttribute('value', tdCollection[i].textContent);
    field.style.width = (cellWidth - (4 + 4)) + 'px'; // removing approximate border of input element from left and right to fit into td.
    field.style.height = (cellHeight) + 'px'; // removing approximate border of input element from left and right to fit into td.
    tdCollection[i].innerHTML = "";
    tdCollection[i].appendChild(field);
  }
  
});

td {
  border: 1px solid black;
}
/*table td, input {
    width: 100px;
    height: 50px;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
}*/

<table id="myTable">
  <tr>
    <td>A very long text</td>
    <td>tinyTxt</td>
  </tr>
  <tr>
    <td>A very long text</td>
    <td>tinyTxt</td>
  </tr>
</table>
<button name="edit">Edit</button>

【讨论】：

您好，谢谢您的回答。为td 设置固定宽度是我的备份解决方案，如果我发现无法做我要求的事情。我试图保留每一列的自然宽度。