html - Full height input in td with bootstrap -
see http://jsbin.com/sawofo/2/edit. trying fill table cell input, using bootstrap's css, left gap can't rid of.
my html snippet is:
<table class="table table-bordered"> <tbody> <tr> <td class="with-input"><input class="form-control tall" type="text" value="text"></td> <td class="tall">xx</td> </tr> </tbody> </table>
and css allows input stretch is:
td { padding: 0px !important; } td.tall { height: 100px; } input.tall { margin: 0; height: 100% !important; display: inline-block; width: 100%; }
but there still gap @ bottom of input can't rid of. appears have bootstrap setting
* { box-sizing: border-box; }
but can't figure out how reverse effect without removing bootstrap. if set td
use content-box
, height fine overflows horizontally next cell.
add padding: 0;
td { padding: 0px !important; } td.tall { height: 100px; padding: 0; } input.tall { margin: 0; height: 100%; display: inline-block; width: 100%; padding: 0;//added }
output
Comments
Post a Comment