table not resizing to input

Question

Why does the table cell not resize to a smaller input field?

I have the following html:

<table>
    <tbody>
        <td>
            <input></input>
        </td>
    </tbody>
</table>

I have the following css:

input {
    width: 50%;
    max-width: 50%;
}

td {
    border: 2px;
    border-color: black;
    border-style: solid;
}

However the border shows that the parent(in this case the td element) takes the original size of the input element after the width is set in the css. Here is a jsfiddle of this demonstrated.

Answer 1

I saw the fiddle and this is what i found.

input {
    width: 50%;
    max-width: 50%;
}

This makes the input 50% wide as compared to td, since td is inputs parent element.

Remove the 50% width and max-width from input and try applying width on table elements

Here's the formatted html.

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

Answer 2

If you set the width of the input, the table will resize if you add this to your html:

td{display: inline;}