2016-09-16 81 views
1

数据表版本:1.10.12DataTables如何更改底部和顶部栏上的高度和字体?

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

enter image description here

实在是太大了(高)我....我也想行的高度更改为只高达它们内部的信件,这样我可以在屏幕上显示更多数据。

我该怎么做?也有可能从页脚移动所有的信息像(显示等等等等和页面按钮,上一页/下一页按钮等)到标题本身?

回答

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/

+0

谢谢。我接受并赞成这个答案 - 因为它正确地解决了这个问题。但我仍然在寻找苗条的行。我尝试了与行相同的操作,但它不起作用:.dataTables_wrapper tr {paddle:0px; } – rajeev

0

也许您必须使用!important作为CSS代码。
第二个问题:
您可以使用dom选项。例如:

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

Read more...