如何居中对齐表头？

Question

全部，  我正在使用ng-table作为Grid。我正在使用以下代码段来设置列。

＆＃13;

＆＃13;

<td data-title="'Access ID'" sortable="'accessID'" style="width:120px" class="text-center">{{people.accessID}}</td>

＆＃13;

＆＃13;

＆＃13;

但我无法将列标题居中对齐，而是列数据。

以下是Access ID标头的源代码段。

＆＃13;

＆＃13;

<th ng-repeat="column in $columns" ng-class="{ 'sortable': parse(column.sortable), 'sort-asc': params.sorting()[parse(column.sortable)]=='asc', 'sort-desc': params.sorting()[parse(column.sortable)]=='desc' }" ng-click="sortBy(column, $event)" ng-show="column.show(this)" ng-init="template=column.headerTemplateURL(this)" class="header  sortable"> <!-- ngIf: !template --><div ng-if="!template" ng-show="!template" ng-bind="parse(column.title)" class="ng-binding ng-scope">Access ID</div><!-- end ngIf: !template --> <!-- ngIf: template --> </th>

＆＃13;

＆＃13;

＆＃13;

问题是，如何将ng-table中特定列的标题居中对齐？

Answer 1

您可以使用header-class属性设置类 - 您猜对了 - 标题。

<td data-title="'Access ID'" sortable="'accessID'" style="width:120px" class="text-center" header-class="text-center">{{people.accessID}}</td>

Answer 2

我以前有同样的问题如何对齐我的ng-table标题。 关于ng-table的文档，它没有说什么也没有说明。

你有两种方法可以实现快速和更专业的

快速方式：

打开文件 ng-table / dist / ng-table.css和ng-table.min.css ，根据您使用的css文件。 在第一行它管理标题，

.ng-table th {
  text-align: center;/*just change that parameter to left/right*/
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

'专业'方式：创建自定义样式并将其添加到您的网站css文件中，如下所示：

.table thead th {
  text-align: left;/*change that parameter to left/right*/
}

希望有所帮助，祝你好运。

Answer 3

对于仍有这个问题的人，也是OP，因为他还没有接受答案，我就是这样做的。在你的CSS（任何.css）

table[ng-table] th {
  text-align: left;
  border-top: none;
}

Answer 4

table .text-center {
    text-align: center;
}

JSFiddle http://jsfiddle.net/BrTzg/411/

Answer 5

修复ngTable

对于那些一年后看到这一点的人。上述解决方案均不适合我。我将其添加到自定义css文件中：

.ng-table th {
   text-align: center !important;
}

将内容集中在标题中（参见图片）

来自：

对此：