如何居中对齐数据表头

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"
    }
  }
});

Answer 1

OP，您非常接近解决方案，只是缺少将类分配给要设置样式的标题的targets选项。columnDefsdt-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

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;
}