Eingabe Eingabe td Höhe und Breite

Question

Ich habe alle gängigen Empfehlungen in Stack Overflow, wie dies zu tun, aber immer noch meine input hat ein bisschen niedriger height als die td.

Sieht aus wie die wichtigsten CSS-Optionen sind display:table-cell; und width:100%;

WICHTIG - Wenn ich table table-condensed entfernen, es ist OK. Die Frage ist, wie inputheight mit table-condensed zu erhalten?

.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; 
} 

Sie müssen sie also außer Kraft zu setzen:

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

Bootstrap standardmäßig padding: 5px Wert in table td hat, wie unten gezeigt.

Aber nicht mit !IMPORTANT - das ist BAD PRAXIS

Stattdessen wird spezifischere in Ihrer Regel.

Das heißt CSS specifity Sie die Spezifität Ihrer Wähler (s) here

auch berechnen können, in Ihrem input Sie nur 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>