Entfernen Sie zusätzlichen Platz in der Unterseite der Tabelle

Question

Wir müssen den zusätzlichen Platz in der Unterseite der table.

Derzeit haben wir wie folgt aus:

aber wir wollen wie folgt aus:

css

.wk_mp_body td { 
    background: #282828; 
} 

.wk_mp_body td { 

    padding: 5px 7px; 
} 

tbody { 
    display: table-row-group; 
    vertical-align: middle; 
    border-color: inherit; 
} 

table { 
    border: 0; 
    border-collapse: collapse; 
    empty-cells: show; 
    font-size: 100%; 
} 

html

<table cellspacing="0" class="border wk_mp_list_table"> 
    <thead> 
     <tr id="wk_mp_tr_heading"> 
     <th><span><?php echo $helper->__('Product Name') ?></span></th> 
     <th><span><?php echo $helper->__('Date') ?></span></th> 
     <th><span><?php echo $helper->__('Product Status') ?></span></th> 
     <th><span>&nbsp;</span></th> 
     </tr> 
    </thead> 
    <tbody class="wk_mp_body"> 
     <tr> 
     <td><input class="input-text" name="s" placeholder='<?php echo $helper->__(' type="text">' value="<?php echo $this->getRequest()->getParam('s')?>"/&gt;</td> 
     <td><span class="wk_mp_td_span"><?php echo $helper->__('') ?> <input class="input-text" id="special_from_date" name="from_date" placeholder='<?php echo $helper->__(' value="<?php echo $this->getRequest()->getParam('from_date')?>">'/&gt;</span> <span class="wk_mp_td_span"><?php echo $helper->__('') ?> <input class="input-text" id="special_to_date" name="to_date" placeholder='<?php echo $helper->__(' value="<?php echo $this->getRequest()->getParam('to_date')?>">'/&gt;</span></td> 
     <td><select class="input-text" name="prostatus" style="height:35px;"> 
      <option value=""> 
      <?php echo $helper->__('All') ?> 
      </option> 
      <option value="1"> 
      <?php echo $helper->__('Approved') ?> 
      </option> 
      <option value="2"> 
      <?php echo $helper->__('Unapproved') ?> 
      </option> 
     </select></td> 
     <td><button class="button" style="background:#fc6c0b;" title="Save" type="submit"><span><span><span><?php echo $helper->__('Submit') ?></span></span></span></button></td> 
     </tr> 
    </tbody> 
    </table> 

mir bitte helfen Lösung

Answer 1

Sie td ‚s verwenden, die standardmäßig über vertical-align:baseline, alles, was Sie so brauchen die vertical-align zu middle

tbody td { 
 
    vertical-align: middle; 
 
    background: black; 
 
} 
 
thead th { 
 
    border: 0; 
 
    text-align: left; 
 
    width: 30%; 
 
} 
 
.wk_mp_td_span { 
 
    float: left; 
 
    width: 50%; 
 
} 
 
button span { 
 
    color: #fff; 
 
    float: left; 
 
    text-align: center; 
 
} 
 
button span span { 
 
    padding: 9px 15px 8px; 
 
    text-transform: capitalize; 
 
} 
 
input, 
 
select, 
 
textarea { 
 
    border: 1px solid #dcdcdc; 
 
    border-radius: 0; 
 
    color: #a0a0a0; 
 
    font: 12px/29px Arial, Helvetica, sans-serif; 
 
    height: 29px; 
 
    padding: 2px 8px !important; 
 
    width: 80%; 
 
} 
 
select { 
 
    height: 35px 
 
}

<table cellspacing="0" class="border wk_mp_list_table"> 
 
    <thead> 
 
    <tr id="wk_mp_tr_heading"> 
 
     <th><span>Product Name</span> 
 
     </th> 
 
     <th><span>Date</span> 
 
     </th> 
 
     <th><span>Product Status</span> 
 
     </th> 
 
     <th><span>&nbsp;</span> 
 
     </th> 
 
    </tr> 
 
    </thead> 
 
    <tbody class="wk_mp_body"> 
 
    <tr> 
 
     <td> 
 
     <input class="input-text" name="s" placeholder="Search by product name" type="text" value=""> 
 
     </td> 
 
     <td><span class="wk_mp_td_span"><input class="input-text hasDatepicker" id="special_from_date" name="from_date" placeholder="From:" value=""></span> <span class="wk_mp_td_span"><input class="input-text hasDatepicker" id="special_to_date" name="to_date" placeholder="To:" value=""></span> 
 
     </td> 
 
     <td> 
 
     <select class="input-text" name="prostatus"> 
 
      <option value=""> 
 
      All 
 
      </option> 
 
      <option value="1"> 
 
      Approved 
 
      </option> 
 
      <option value="2"> 
 
      Unapproved 
 
      </option> 
 
     </select> 
 
     </td> 
 
     <td> 
 
     <button class="button" style="background:#fc6c0b;" title="Save" type="submit"><span><span><span>Submit</span></span> 
 
      </span> 
 
     </button> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

zu finden Warum haben Sie zwei .wk_mp_body td CSS-Klassen? Kombiniere es zu einem.

Sie haben 5px 7px Polsterung, versuchen Sie es zu entfernen.

Answer 3

Zusammenführen der beiden Klassen (.wk_mp_body td) IE:

.wk_mp_body td { 
background: #282828; 
padding: 5px 7px; 
} 

Und die Zahl auf der Polsterung reduzieren.