移除桌子底部的额外空间

Question

我们需要删除table底部的额外空格。

目前，我们有这样的想法：

但我们想这样：

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>

请帮我找到解决方案

Answer 1

为什么你有两个.wk_mp_body td css类？合二为一。

你有5px 7px的填充，尝试删除它。

Answer 2

合并这两个类（.wk_mp_body td） IE：

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

减少填充上的数字。

Answer 3

您使用的是td，默认情况下为vertical-align:baseline，所以您只需将vertical-align设置为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>