jQuery 如何居中对齐数据表标题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38056634/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to center align datatables header
提问by wildashfihana
I'm new to datatables. When I make table header, it's always left align. How can I set the header to center align? I've read datatables.net/manual/styling/classes and datatables.net/reference/option/columns.className but still don't know how to implement it.
我是数据表的新手。当我制作表格标题时，它总是左对齐。如何将标题设置为居中对齐？我已经阅读了 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"
}
}
});
采纳答案by Praveen Kumar Purushothaman
You might have forgotten after specifying the class, you need to add the following in CSS:
指定类后你可能忘记了，你需要在CSS中添加以下内容：
.dt-head-center {text-align: center;}
Also, if the class has not been added to the <th>of the table, try adding the below CSS for generic stuff:
此外，如果该类尚未添加到<th>表中，请尝试为通用内容添加以下 CSS：
thead, th {text-align: center;}
/* OR */
.table thead,
.table th {text-align: center;}
To make it specific to a particular table, you can give the table an id="tableID"and then in the CSS, you can do:
要使其特定于特定表，您可以给表一个id="tableID"，然后在 CSS 中，您可以执行以下操作：
#tableID thead,
#tableID th {text-align: center;}
回答by carbonspace
OP, you were super close to the solution, just missing the targetsoption in columnDefsto assign the dt-head-centerclass to the header you want to style.
OP，您非常接近解决方案，只是缺少将类分配给要设置样式的标题的targets选项。columnDefsdt-head-center
// apply to columns 1 & 2
targets: [ 0, 1 ]
CSS is an option but not necessary.
CSS 是一种选择，但不是必需的。
I like the DataTables suggested method of using the column.classNameoption for the styling of cells then apply them using targets. https://datatables.net/reference/option/columns.classNameThis gives us a finer level of control as opposed to a global CSS application.
我喜欢 DataTables 建议的使用column.className单元格样式选项的方法，然后使用targets. https://datatables.net/reference/option/columns.className与全局 CSS 应用程序相比，这为我们提供了更精细的控制级别。
This will align header and body content individually:
这将分别对齐标题和正文内容：
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 ] }
]
or align them both at the same time:
或同时对齐它们：
columnDefs: [
// Center align both header and body content of columns 1, 2 & 3
{ className: "dt-center", targets: [ 0, 1, 2 ] }
]
Cell class format:
单元格类格式：
dt[-head|-body][-left|-center|-right|-justify|-nowrap]
More info on DataTables cell classes: https://datatables.net/manual/styling/classes#Cell-classes
有关 DataTables 单元格类的更多信息：https: //datatables.net/manual/styling/classes#Cell-classes
回答by Ricky
You can do this with CSS. Just use your table class as a selector and target every table heading inside that selector, like this:
你可以用 CSS 做到这一点。只需将您的表类用作选择器，并将该选择器内的每个表标题作为目标，如下所示：
.table th {
text-align: center;
}
回答by Amer Sawan
by using this style :
通过使用这种风格：
table.center-all td,th{
text-align :center;
}
I can add the center-allclass to my table and everything will be aligned to center. like this :
我可以将center-all类添加到我的表中，所有内容都将居中对齐。像这样 ：
<table class="center-all">
....
</table
In this way I have the option to center the content of some tables without need to apply it to the whole page/site
通过这种方式，我可以选择将某些表格的内容居中，而无需将其应用于整个页面/站点
