减少dataTable tr高度

Posted 2023-05-07

【中文标题】减少dataTable tr高度

【英文标题】：Reduce dataTable tr height

【发布时间】：2014-11-01 22:27:04

【问题描述】：

我正在使用 dataTable jquery 插件。 我需要减少行的高度，我该怎么做？ （我需要一个固定的高度）

我试过了：

.dataTables tbody tr 
    min-height: 35px; /* or whatever height you need to make them all consistent */

JSFiddle

【问题讨论】：

TR 没有身高。您必须将高度应用于其tds。 Little fiddle for you

【参考方案1】：

tr 没有高度。

您必须将height 应用于其tds

Click here to see the fiddle

【讨论】：

这行得通，但这并没有设置固定的高度。如果数据很大，那么行高会自动增加。我应该如何设置固定高度？提前致谢

【参考方案2】：

CSS 的padding 也可以解决问题 - 在这里查看example。这来自this论坛讨论。

【参考方案3】：

在你的 CSS 中设置：

<style>
    td 
        white-space: nowrap;
        max-width: 100%;
    
</style>

这些 DataTable 选项将使它变得更好：

scrollY: "530px",
scrollX: true,
scrollCollapse: true,

【参考方案4】：

像这样更改 td 填充 CSS：

table.dataTable tbody th, table.dataTable tbody td 
        padding: 1px 1px;