web-dev-qa-db-ja.com

データテーブルのヘッダーを中央揃えにする方法

私はデータテーブルが初めてです。テーブルヘッダーを作成すると、常に左揃えになります。ヘッダーを中央揃えに設定するにはどうすればよいですか？ datatables.net/manual/styling/classesおよびdatatables.net/reference/option/columns.classNameを読みましたが、まだ実装方法がわかりません。

$('.table').DataTable({
  "paging": true,
  "lengthChange": true,
  "searching": true,
  "ordering": true,
  "info": true,
  "language": {
    "url": "http://cdn.datatables.net/plug-ins/1.10.9/i18n/Indonesian.json"
  }
  "columnDefs": {
    {
      className: "dt-head-center"
    }
  }
});
jqueryhtmlcssdatatables
9
wildashfihana

クラスを指定した後に忘れている場合は、CSSに以下を追加する必要があります。

.dt-head-center {text-align: center;}

また、クラスがテーブルの<th>に追加されていない場合は、一般的なもののために以下のCSSを追加してみてください：

thead, th {text-align: center;}

/* OR */

.table thead,
.table th {text-align: center;}

特定のテーブルに固有にするために、テーブルにid="tableID"を指定し、CSSで次のことができます。

#tableID thead,
#tableID th {text-align: center;}
7
Praveen Kumar Purushothaman

OP、ソリューションに非常に近かったので、スタイルを設定するヘッダーにdt-head-centerクラスを割り当てるtargetsのcolumnDefsオプションが欠落しています。

// apply to columns 1 & 2
targets: [ 0, 1 ]

CSSはオプションですが、必須ではありません。

セルのスタイル設定にcolumn.classNameオプションを使用し、targetsを使用して適用するDataTables推奨の方法が好きです。 https://datatables.net/reference/option/columns.className これにより、グローバルなCSSアプリケーションとは対照的に、より細かいレベルの制御が可能になります。

これにより、ヘッダーと本文のコンテンツが個別に調整されます。

columnDefs: [
    // Center align the header content of column 1
   { className: "dt-head-center", targets: [ 0 ] },
   // Center align the body content of columns 2, 3, & 4
   { className: "dt-body-center", targets: [ 1, 2, 3 ] }
]

または、両方を同時に調整します。

columnDefs: [
   // Center align both header and body content of columns 1, 2 & 3
   { className: "dt-center", targets: [ 0, 1, 2 ] }
]

セルクラスの形式：

dt[-head|-body][-left|-center|-right|-justify|-nowrap]

DataTablesセルクラスの詳細： https://datatables.net/manual/styling/classes#Cell-classes

4
carbonspace

CSSでこれを行うことができます。次のように、テーブルクラスをセレクタとして使用し、そのセレクタ内のすべてのテーブルヘッダーをターゲットにします。

.table th {
  text-align: center;
}
3
Ricky

このスタイルを使用して：

table.center-all td,th{
    text-align :center;
}

center-allクラスをテーブルに追加すると、すべてが中央に揃えられます。このような ：

<table class="center-all">
    ....
</table

このようにして、ページ/サイト全体に適用する必要なく、いくつかのテーブルのコンテンツを中央に配置するオプションがあります

2
Amer Sawan