如何居中对齐数据表标题

Question

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

原文由 wildashfihana 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可能忘记了指定类之后，你需要在 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;}

原文由 Praveen Kumar Purushothaman 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

OP，您非常接近解决方案，只是缺少 targets 中的选项 columnDefs 将 dt-head-center 分配给标题。

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

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

我喜欢 DataTables 建议的方法，即使用 column.className 选项为单元格设置样式，然后使用 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

原文由 carbonspace 发布，翻译遵循 CC BY-SA 3.0 许可协议