删除表格底部的多余空间答案

【问题标题】：Remove extra space present in bottom the table删除表格底部的多余空间
【发布时间】：2023-03-08 14:35:01
【问题描述】：

我们需要删除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>

请帮我找到解决办法

【问题讨论】：

可以添加对应的HTML吗？
或者，更好的是，为我们准备一个小提琴：jsfiddle.net
@Pugazh 我添加了 html 部分，如果可能的话我会尝试 jsfiddle.net。
您还可以使用堆栈片段功能（图标看起来像一个带有<> 的页面）。

标签： html css html-table

【解决方案1】：

您使用的是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>

【讨论】：

抱歉，我无法完全删除，请查看here
以前是这样的：prnt.sc/b677zd 现在是这样的：prnt.sc/b6785x
@nsdlfefinedieicbe 抱歉耽搁了，但您的 ScreenShot 向我展示了您想要的内容，输入与黑表垂直对齐。你还想要什么？
如果你检查问题，你可以检查第二张图片。空间非常小。请仔细观察，你会发现不同的。
你能检查一下吗：stackoverflow.com/questions/37269248/…

【解决方案2】：

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

你有 5px 7px 的内边距，试着去掉它。

【讨论】：

请访问link并使用电子邮件登录：kidsdial4@gmail.com，密码：totaltoys99并帮助我
去掉这个：.wk_mp_body td { padding: 5px 7px; }
如果我这样做，它将删除文本框之间的背景颜色。
然后添加一个较小的值，比如 2px 5px 或者直到你有理想的间距
我试过了，但仍然没有完全减少。我想要this之类的东西

【解决方案3】：

合并两个类 (.wk_mp_body td) 即：

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

并减少填充上的数字。

【讨论】：