Question

“如何为jQuery数据表设置行高”是一个经常被问到的问题，我知道如何去做。但我要做的是，将该值设置为非常小的数字，但我没有这样做。

#example tr td {
    height: 50px;
}

行高设置为50px，效果很好。当我将该数字更改为30px或70px时，运行它，高度也会正常更改。

但是当我尝试将该值设置为非常小的数字时，例如10px，5px甚至1px，高度不会改变。似乎数据表非常“智能”，它检测它包含的内容的高度，并且不允许用户设置非常小的值。

但我要做的是，创建一个非常“紧凑”的桌子，它能够在一个小屏幕上显示更多数据，例如1366 * 768笔记本电脑屏幕，而无需向上/向下滚动。所以我想挤出任何余量。看一下示例表，还有一些余量。但是我需要一张没有这个边距的桌子： A Microsoft Word table without any margin

我甚至可以接受文本的一部分黯然失色。

Answer 1

您所遇到的不是由数据表引起的，而是由<td>本身引起的。具有display: table-cell的任何元素都将展开以包含其所有内容。使用其他答案所述的line-height，或将每个单元格的内容包装在<div>中，并设置<div>的高度。

（如下所示：https://stackoverflow.com/a/7190647/1543004）

<style>
    td > div { height: 5px; }
</style>
<tr>
    <td><div>Foo</div></td>
    <td><div>Bar</div></td>
    <td><div>Baz</div></td>
</tr>

Answer 2

您可以通过减少行高和行内容的高度来管理行的高度。

例如：

#example tr td {
line-height: 10px;

}

Answer 3

您可以随着桌面尺寸的减小更改行高或减小字体大小。

#example tr td {
height: 4px;
line-height: 1; // or line-height: 0.8 etc
font-size: 12px;

}

如何将jQuery数据行的行高设置为一个非常小的数字？我需要一张非常“紧凑”的桌子

3 个答案: