使輸入適合td的高度和寬度

Question

我已經包括堆棧溢出中的所有流行推薦如何做到這一點，但仍然我的input比td有點低height。

貌似關鍵CSS選項display:table-cell;和width:100%;

重要 - 如果我刪除​​，沒關係。

但問題是，如何保留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，你可以計算出你的選擇（S）的特異性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>