如何使INPUT元素填充整個表TD單元

Question

使用此示例表：

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

        <input value = "this is the text">

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

我有<input>元素填充表的<td>單元格。 默認情況下，它（ <input>元素）不會占用其<td>單元格的所有可用空間。 如何確保<input>元素始終填充邊緣之間的空間？

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

如果您使用的是<input type =“ text”>：

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