2016-09-16 9 views
1

DataTableのバージョン:1.10.12DataTables下部バーと上部バーの高さとフォントを変更する方法は?

私はDataTableのを持っていると私は上部と下部のバーに表示される高さとフォントを変更したい、私は、要素を使用し、CSSで多くのことをしようとした各種の設定を適用するにはFirefoxで点検します.datatablesクラスには、何もしません。私はこれを変更したい:

enter image description here

が、それは私のために(高さ)は大きすぎる....私はまた、唯一のそれらの内側の文字もの高さに行の高さを変更したいです、私は画面上でより多くのデータを持つことができます。

どうすればいいですか?また、ヘッダー自体にフッターのようなすべての情報を移動することも可能です(blah blah ..とページボタン、prev/nextボタンなどを表示します)?

答えて

1

あなたがしようとしているか見ていいだろうが、私はあなたがjquery UIスタイリングを使用していることを忘れては信じています。標準.dataTables_wrapper CSSクラスと一緒にCSSで.ui-button.ui-toolbarターゲット:

/* 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

ありがとうございました。私はこれを受け入れて、このansに投票しました。問題を正しく解決しています。しかし、私はまだスリムな行を探しています。私は行と同じを試みたが、それは動作しませんでした:.dataTables_wrapper tr { 埋め込み:0px; } – rajeev

0

多分、CSSコードに!importantを使用する必要があります。
これにはdomオプションを使用できます。たとえば:

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

Read more...

関連する問題