如何最小化 HTML 表格单元格的顶部和底部“填充”？答案

【问题标题】：How can I minimize the top and bottom "padding" for HTML table cells?如何最小化 HTML 表格单元格的顶部和底部“填充”？
【发布时间】：2019-06-03 21:20:22
【问题描述】：

我尝试在表格的上方和下方使用尽可能少的文本单元格填充。

下面的 sn-p 显示了我到目前为止所做的事情。但是，它仍然包含单元格文本的可见顶部和底部“填充”。

还有哪些其他 CSS 选项可以减少文本上方的空白，从而使文本呈现在顶线下方，而底线则在文本下方无间隙地绘制？

td {
  border: 1px solid silver;
  line-height: 1;
}

table {
  border-collapse: collapse;
}

<!DOCTYPE html>
<html>

<head>
  <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Table Test</title>
</head>

<body>
  <table>
    <tr>
      <td>
        First row
      </td>
    </tr>
    <tr>
      <td>
        Second row
      </td>
    </tr>
  </table>
</body>

</html>

非常感谢到目前为止的回答！

在我的例子中，实际的字体系列和字体大小是未知的，这意味着 CSS 不能使用任何固定的行高值，因为这有截断字符的风险。所以我正在寻找一个“规范”且安全的解决方案。

理想情况下，只有一个 CSS 设置会导致文本和边框之间的“间隙”消失，并且适用于所有字体系列和字体大小（单个单元格中可能使用不止一种字体）。

【问题讨论】：

更改文本的行高可能会有所帮助
padding:0 到 td?
@AndreF 是的，这影响很小。但是仍然有一个可见的填充左侧
不要在td 中使用p...除非您真的表示您有一段文字。见Is it good to put <p> inside <td> to put content text?
@HereticMonkey 我删除了 p（使示例更具可读性）

标签： html css html-table cellpadding

【解决方案1】：

首先使单元格字体系列相同，这里您只描述一个单元格字体系列，这就是为什么两个单元格具有不同的行高和填充。

所以让它成为一个字体系列 && 使行高 12px;

【讨论】：

非常感谢，请查看我的编辑 - 字体系列和字体大小未知，因此行高的固定值可能会导致截断字符。
ok 使用这种方式 td { margin:0px;填充：0px；行高：12px；所以没有更多的填充和边距，基本上你需要以像素为单位指定行高

【解决方案2】：

试试这个：

body,
p {
  margin: 0px;
}

td {
  border: 1px solid silver;
  padding:0; 
  margin:0;
}

table {
  border-collapse: collapse;
}

它最大限度地减少了单元格中的边距和填充。

【讨论】：

使用 Firefox 和 Chrome，我看不出有什么区别。您使用哪种浏览器进行测试？
我使用的是 Chrome v74.0.3729.169，我可以看到一些不同。
这里版本相同，我不确定我的浏览器出了什么问题。我会再试一次。

【解决方案3】：

您是否尝试在每一行上添加一个 div 以使其底部边缘？

像这样：

<!DOCTYPE html>
<html>

<head>
  <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Table Test</title>
</head>

<body>
  <table>
    <tr>
      <td>
        <p>
   <div class="FirstRow">
          First row
   </div>
        </p>
      </td>
    </tr>
    <tr>
      <td>
        <p>
          <div class="SecondRow">
          Second row
          </div>
        </p>
      </td>
    </tr>
  </table>
</body>

</html>

和

body,
p {
  margin: 0px;
}

td {
  border: 1px solid silver;
}

table {
  border-collapse: collapse;
}

 .FirstRow {
  margin-bottom: ...px;
}

 .SecondRow {
  margn-bottom: ...px;
}

 table {
  border-collapse: collapse;
}

?

【讨论】：

向 HTML 添加更多元素如何减少空间量？请edit你的问题解释这如何回答OP的问题。
您好，我在 html 中添加了
元素以将它们编辑为 css。然后添加一个 margin-top: ...px;减少填充

【解决方案4】：

试试这个：

td {
  line-height: 10px; /* or value which suits your design */
}

这个怎么样？

td div{
    margin-top: -4px; /* or value which suits your design */
}

....
<td><div>Your Data</div></td>
....

【讨论】：

行高：1；（无单位）是推荐的方式developer.mozilla.org/en-US/docs/Web/CSS/line-height - 我无法控制实际的字体大小，所以我不能使用固定值
“试试这个”很少是一个好的答案。最好解释一下您为什么建议答案中存在的代码。
@Heretic Monkey ，属性 line-height 控制文本行之间的空间。我们知道，默认情况下 TD 会根据其子内容自动调整大小。所以强迫它减少行空间可能会奏效。
Edit 你的问题和解释，以便 OP 和未来的访问者知道。
如果
css 属性 margin-top 也接受负值，所以同样你可以推动 div 穿过/重叠默认边距。

【解决方案5】：

单元格本身也提供填充。所以请提供“填充：0”和“行高：.9em”（字体大小的 90%）。

td {
  border: 1px solid silver;
  padding:0;
  line-height:.9em;
}

body,
p {
  margin: 0;
}

td {
  border: 1px solid silver;
  vertical-align:top;
  line-height:.9em;
padding:0;

}

table {
  border-collapse: collapse;
    border: 1px solid;
   
}

<!DOCTYPE html>
<html>

<head>
  <title>Table Test</title>
</head>

<body>
  <table>
    <tr>
      <td>
        <p>
          First row
        </p>
      </td>
    </tr>
    <tr>
      <td>
        <p>
          Second row jygq
        </p>
      </td>
    </tr>
  </table>
</body>

</html>

【讨论】：

“试试这个”很少是一个好的答案。最好解释一下您为什么建议答案中存在的代码。
对不起。我添加了 JSFiddle 链接
添加一个 JSFiddle 链接与我所说的正交:)。您应该解释您的代码如何解决 OP 的问题。请注意，如果您想提供一个可运行的示例，您可以使用Stack Snippets 而不是 JSFiddle。
单元格本身也提供填充。所以将其重置为零并将行高减少到 .9em（字体大小的 90%）
Edit 你的问题和解释，以便 OP 和未来的访问者知道。