DataTables如何更改底部和顶部栏的高度和字体？答案

【问题标题】：DataTables how to change the height and fonts on the bottom and top bar?DataTables如何更改底部和顶部栏的高度和字体？
【发布时间】：2024-05-22 07:00:01
【问题描述】：

数据表版本：1.10.12

我有一个 DataTable，我想更改顶部和底部栏中显示的高度和字体，我在 CSS 中尝试了很多东西，使用 Firefox 中的元素检查将各种设置应用于 .datatables 类，但它只是不会做任何事情。我想改变这个：

它对我来说太大（高度）......我还想将行的高度更改为仅与其中的字母一样高，以便我可以在屏幕上显示更多数据。

我该怎么做？是否可以将所有信息从页脚（显示等等等等……和页面按钮、上一个/下一个按钮等）移动到页眉本身？

【问题讨论】：

标签： jquery datatables datatables-1.10

【解决方案1】：

很高兴看到您尝试了什么，但我相信您忘记了您正在使用jquery UI 样式。在 CSS 中定位 .ui-button 和 .ui-toolbar 以及标准的 .dataTables_wrapper CSS 类：

/* change font in top and bottom */
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .ui-button {
  color: red;
  font-family: 'courier'
}

/* change "height" caused by exaggerated padding */
.dataTables_wrapper .ui-toolbar {
  padding: 0px;
}

http://jsfiddle.net/rqm49duz/

【讨论】：

谢谢。我接受并投票赞成这个答案 - 因为它正确地解决了这个问题。但我仍在寻找苗条的行。我对行进行了同样的尝试，但是没有用： .dataTables_wrapper tr { padding: 0px; }

【解决方案2】：

也许您必须使用 !important 来编写 CSS 代码。
第二个问题：
您可以为此使用dom 选项。例如：

$('#example').dataTable( {
  "dom": '<"wrapper"flipt>'
} );