Question

我尝试渲染一个表格，表格上方和下方的填充文本单元格尽可能小。

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

还有什么其他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设置会导致文本和边框之间的“间隙”消失，并且适用于所有字体系列和字体大小（单个单元格中可能使用多个字体）。 / p>

Answer 1

首先使单元格字体系列相同，这里仅描述一个单元格字体系列，这就是两个单元格具有不同的行高和填充度的原因。

因此将其设为一个字体系列，并将行高设为12px;

Answer 2

尝试一下：

body,
p {
  margin: 0px;
}

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

table {
  border-collapse: collapse;
}

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

Answer 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;
}

？

Answer 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>
....

Answer 5

单元格本身也提供填充。因此，请提供“ padding：0”和“ line-height：.9em”（字体大小的90％）。

AddToJson()

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;
   
}

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

5 个答案: