如何中心对齐数据标头

Question

我是DataTables的新手。当我制作桌标头时，它总是保持对齐。如何将标题设置为中心对齐？我已经阅读了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"
    }
  }
});

Answer 1

op，您非常接近解决方案，只是在columnDefs中缺少targets选项，以将dt-head-center类分配给您要样式的标题。

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

CSS是一种选择，但不是必需的。

我喜欢使用column.className选项用于造型的DataTables建议的方法，然后使用targets应用它们。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

Answer 2

指定课后可能已经忘记了，您需要在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;}

Answer 3

您可以使用CSS进行此操作。只需将您的表类用作选择器，然后定位选择器内部的每个表格，例如：

.table th {
  text-align: center;
}

Answer 4

通过使用此样式：

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

我可以将center-all类添加到我的桌子上，一切都会对齐到中间。这样：

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

以这种方式，我可以选择将某些表内容集中到无需将其应用于整个页面/站点