如何使INPUT元素填充整个表TD单元格

Question

使用此示例表：

.StrongText {
font-weight: bold;
}

我的<table> <tbody> <tr> <td> <input value = "this is the text"> </td> </tr> </tbody> </table> 元素填充了表<input>单元格。默认情况下，它（<td>元素）不占用其<input>单元格的所有可用空间。如何确保<td>元素始终从边缘到边缘填充空间？

Answer 1

试试这个：

table {
  width: 100%;
  border: 1px solid #ccc;
}

table td input {
  // display: block;
  width: 100%;
}

<table>
  <tbody>
    <tr>
      <td>

        <input value = "this is the text">

      </td>
    </tr>
  </tbody>
</table>

Answer 2

如果您使用＆lt; input type =“text”＆gt;：

input[type="text"] {
    width: 100%;
    box-sizing: border-box /* Just in case if you have defined
                           left or right padding to the input */
}