Set input height 100% of parent
You cannot set height:100%;
on an element if the parent hasn't a set height.
Just set td { height: 30px; }
and it should work.
Actually, my last link was not working. After a few researches, it seems that you cannot achieve what you want without some JavaScript. But as you said, you tried to use JavaScript, so I assume this should be what you're looking for : Answer to the same kind of question (Have a look at its fiddle.) Seemingly, you won't have the choice.
You can set position:absolute
to the input.
Here a Fiddle example (note that you must also set a width for the <td>
that contains the input):
input{
position:absolute;
top:0px;
height:100%;
}
td{
position:relative;
width:200px;
}
It works also with <input type="submit">
and <div>
.
Tested on Firefox, Chrome and Edge, For Explorer, you should set a min-height to the input to make it at least usable.
UPDATE: For Dracco, here a Fiddle implementing your example.
Somehow setting table height to 100% works.
table {
height: 100%;
}
input {
height: 100%;
}
<table>
<tr>
<td> 1<br> 1 </td>
<td> <input> </td>
</tr>
</table>