Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Stretch input field height to fill table cell

How do you make an input field stretch to the height of a table's cell using plain css for ie8?

   <table>
    <tr>
        <td>line1<br />line2</td>
        <td><input type = "text" /></td>
    </tr>
</table>

height:100% on the input does not work and neither does a combination of:

    height:inherit;
    display:inline-block;
    position:relative;

If the answer is you cannot, then that is fine, i'll put some jquery together to do it.

like image 951
Jimmyt1988 Avatar asked Apr 03 '13 11:04

Jimmyt1988


1 Answers

Add padding:0 to td and height:100% to input

input { 
    height:100%; 
    display:inline-block;
    position:relative;
}
td {        
    border:solid green 1px;
    background:pink;
    padding:0;
}

DEMO

like image 177
Sowmya Avatar answered Nov 10 '22 10:11

Sowmya