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

Question

With this example table:

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

        <input value = "this is the text">

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

I have the <input> element populating the table's <td> cell. By default it (the <input> element) does not take all the space available by its <td> cell. How to make sure that the <input> element always fills the space from edge to edge?

Answer 1

Try this:

 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

If you are using <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 */
}