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

如何为jQuery数据表设置行高是一个常见问题，我知道如何设置。但我想做的是，把这个值设置为一个非常小的数字，但我没有做到

请看以下示例：

行高度设置为50px，效果良好。当我把这个数字改为30px或70px，运行它，高度也会正常变化

但当我尝试将该值设置为一个非常小的数字，例如10px、5px甚至1px时，高度不会改变。看起来datatables非常“智能”，它检测它包含的内容的高度，不允许用户设置很小的值

但我想做的是，创建一个非常紧凑的表，它能够在一个小屏幕上显示更多数据，比如1366*768笔记本电脑屏幕，而无需上下滚动。所以我想挤出任何利润。看看示例表，仍然有一些余量。但我需要一张没有边距的桌子：

---

我甚至可以接受文本的一部分被遮住了。

您可以通过降低td的行高和内容高度来管理行高

例如：

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

---

}

您可以随着表格大小的减小而更改行高或减小字体大小

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

---

}

您所经历的不是数据表造成的，而是数据表本身造成的。任何带有display:table单元格的元素都将展开以包含其所有内容。或者使用其他答案中列出的行高，或者将每个单元格的内部内容包装在一个表格中并设置其高度

如图所示：

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

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