如何让输入字段填满 HTML 表格中的整个单元格？

Question

我有一个表，其中有一列，用户必须在输入字段中输入数字。目前，该单元格包含一个输入字段（参见图 1），但我更希望整个单元格都是一个输入字段（参见图 2）。

整个表格有 8px 填充（请参阅下面的样式 CSS），所以我认为这就是为什么我无法使输入字段填充单元格的原因。但是，我确实需要表格的其他列有 8 像素的填充。

欢迎任何帮助！

这是我的 CSS 代码的一部分：

<style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 8px;
            text-align: left;
            border: 1px solid black;
        }
      
    </style>

Answer 1

如果您愿意接受

position: absolute

，即使不指定宽度和高度也可以做到。但是，请注意，在这种情况下，

input

不占用“空间”，因此，如果同一行没有其他单元格，它可能会缩小表格单元格。因此，最好为表格单元格设置

height

和

width

。

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 8px;
  text-align: left;
  border: 1px solid black;
  position: relative;
}

td input {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 0;
}


/* recommended: */

table {
  table-layout: fixed;
}

td,
th {
  /* height: 50px; */
}

<table>
  <tr>
    <td>
      cell1
    </td>
    <td>
      <input type="text" value="cell2 (edit me)">
    </td>
  </tr>

  <tr>
    <td>
      <input type="text" value="cell3 (edit me)">
    </td>
    <td>
      <input type="text" value="cell4 (edit me)">
    </td>
  </tr>
</table>