2

我尝试使用尽可能少的文本单元格填充来渲染表格。

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

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

4

5 回答 5

1

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

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

于 2019-06-03T13:00:12.063 回答
0

尝试这个：

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>
....
于 2019-06-03T12:05:27.863 回答
0

尝试这个：

body,
p {
  margin: 0px;
}

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

table {
  border-collapse: collapse;
}

它进一步最小化了单元格中的边距和填充。

于 2019-06-03T11:53:47.140 回答
0

您是否尝试在每一行上添加一个 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;
}

?

于 2019-06-03T11:57:34.100 回答
0

单元格本身也提供填充。所以请提供“填充：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>

于 2019-06-03T12:17:10.740 回答