【问题标题】:Remove cell padding on top and bottom删除顶部和底部的单元格填充
【发布时间】:2014-02-14 14:36:12
【问题描述】:

我想知道为什么顶部和底部都有填充。我希望“审阅者”和“日期”周围的边框没有任何填充。我已将单元格间距和单元格填充设置为零。有没有办法使用 css 删除它?

<table width="100%" border="0" align="right" cellpadding="0" cellspacing="0">
  <tr>
    <td width="46%" rowspan="2">&nbsp;</td>
    <td width="1%" height="39">&nbsp;</td>
    <td width="19%">&nbsp;</td>
    <td width="22%">
      <p>
        <label for="Reviewd by"><br />
                </label>
        <p>
        </p>
    </td>
    <td width="10%">&nbsp;</td>
    <td width="10%"><br></td>
    <td width="2%" rowspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td width="1%" height="81" style="border:3px solid black; border-right:hidden;">&nbsp;</td>
    <td width="19%" style="border:3px solid black; border-right:hidden; border-left:hidden;">
      <p>Reviewed by<br />
        <label for="Reviewd by5"></label>
        <input type="text" name="Reviewd by" id="Reviewd by5" />
      </p>
    </td>
    <td style="border: 3px solid black; border-left: hidden; font-size: 6pt;">
      <p>&nbsp;</p>
      <p>
        <select name="month6">
          <option value="1">January </option>
          <option value="2">February </option>
          <option value="3">March </option>
          <option value="4">April </option>
          <option value="5">May </option>
          <option value="6">June </option>
          <option value="7">July </option>
          <option value="8">August </option>
          <option value="9">September </option>
          <option value="10">October </option>
          <option value="11">November </option>
          <option value="12">December </option>
        </select>
        <select name="day6">
          <option value="1">1 </option>
          <option value="2">2 </option>
          <option value="3">3 </option>
          <option value="4">4 </option>
          <option value="5">5 </option>
          <option value="6">6 </option>
          <option value="7">7 </option>
          <option value="8">8 </option>
          <option value="9">9 </option>
          <option value="10">10 </option>
          <option value="11">11 </option>
          <option value="12">12 </option>
          <option value="13">13 </option>
          <option value="14">14 </option>
          <option value="15">15 </option>
          <option value="16">16 </option>
          <option value="17">17 </option>
          <option value="18">18 </option>
          <option value="19">19 </option>
          <option value="20">20 </option>
          <option value="21">21 </option>
          <option value="22">22 </option>
          <option value="23">23 </option>
          <option value="24">24 </option>
          <option value="25">25 </option>
          <option value="26">26 </option>
          <option value="27">27 </option>
          <option value="28">28 </option>
          <option value="29">29 </option>
          <option value="30">30 </option>
          <option value="31">31 </option>
        </select>
        <select name="year6">
          <option value="2002">2002 </option>
          <option value="2003">2003 </option>
          <option value="2004">2004 </option>
          <option value="2005">2005 </option>
          <option value="2006">2006 </option>
          <option value="2007">2007 </option>
          <option value="2008">2008 </option>
          <option value="2009">2009 </option>
          <option value="2010">2010 </option>
          <option value="2011">2011 </option>
          <option value="2012">2012 </option>
          <option value="2013">2013 </option>
          <option value="2014">2014 </option>
        </select>
      </p>
    </td>
    <td width="10%">&nbsp;</td>
    <td width="10%"><img src="images/EQUALHOUSING.PNG" width="79" height="76" /></td>
  </tr>
</table>

【问题讨论】:

  • 我强烈推荐使用 Chrome 的“检查元素”功能。我把你的代码变成了一个小提琴,看起来你的 &lt;p&gt; 有 16 个边距。我认为这是你的问题。

标签: html css


【解决方案1】:

这不是填充。行中的单元格始终具有相同的高度。在您的示例中,“填充是由“审阅者”之前的单元格引起的 - 它的高度设置为 81px。如果浏览器窗口很小,“填充”来自“日期”单元格中的自动换行

【讨论】:

  • 还有一个高度为 76px 的 img
【解决方案2】:

除了上面的答案之外,可能还有一个元素、按钮或图像,也许只有在悬停时不可见,它们具有更大的高度,从而防止行垂直收缩。

【讨论】: