入力フィットを高さと幅に合わせる

Question

スタックオーバーフローの一般的な推奨事項をすべて含めましたが、inputのビットはtdよりも少し下になります（）。

キーCSSのオプションがdisplay:table-cell;とwidth:100%;

重要ているように見える - 私は​​を削除した場合、それはOKです。

しかし、問題は、inputのheightを保存する方法はtable-condensedですか？

Fiddle

td.zeon_input_table_cell input { 
 
    display: table-cell; 
 
    width: 100%; 
 
    background-color: transparent 
 
} 
 
td { 
 
    border: solid 
 
}

<table id="formset" class="form table table-condensed zeon zeon-row-hover"> 
 
    <thead> 
 
    <th>Column 1</th> 
 
    <th>Column 2</th> 
 
    </thead> 
 
    <tbody> 
 
    <tr class="row1"> 
 
     <td class="zeon_input_table_cell"> 
 
     <input id="id_form-0-id" name="form-0-id" type="hidden" value="1"> 
 
     </td> 
 

 
     <td class="zeon_input_table_cell"> 
 
     <input id="id_form-0-min_delivery_value" name="form-0-min_delivery_value" step="any" type="number" value="5000.0"> 
 
     </td> 
 
    </tr>

Answer 1

以下に示すようにブートストラップは、table tdにデフォルトpadding: 5px値であり：

.table-condensed thead > tr > th, 
.table-condensed tbody > tr > th, 
.table-condensed tfoot > tr > th, 
.table-condensed thead > tr > td, 
.table-condensed tbody > tr > td, 
.table-condensed tfoot > tr > td { 
    padding: 5px; 
} 

だから、あなたがそれらを無効にする必要があります。

しかし!IMPORTANTを使用していない - これはあなたのルールでより具体的なされ、代わりに

悪い習慣です。

これはCSS specifityと呼ばれ、あなたのセレクタの特異性を計算することができます（複数可）here

はまた、あなたのinputであなただけのwidth:100%

#formset td.zeon_input_table_cell input { 
 
    width: 100%; 
 
} 
 
#formset td { 
 
    border: solid; 
 
    padding: 0; 
 
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<table id="formset" class="form table table-condensed zeon zeon-row-hover"> 
 
    <thead> 
 
    <th>Column 1</th> 
 
    <th>Column 2</th> 
 
    </thead> 
 
    <tbody> 
 
    <tr class="row1"> 
 
     <td class="zeon_input_table_cell"> 
 
     <input id="id_form-0-id" name="form-0-id" type="hidden" value="1"> 
 
     </td> 
 

 
     <td class="zeon_input_table_cell"> 
 
     <input id="id_form-0-min_delivery_value" name="form-0-min_delivery_value" step="any" type="number" value="5000.0"> 
 
     </td> 
 
    </tr>