web-dev-qa-db-ja.com

ng-Tableヘッダーを中央揃えにする方法は？

すべて、私はグリッドにng-tableを使用しています。次のコードスニペットを使用して列を設定しています。

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

enter image description here

しかし、列ヘッダーではなく列データを中央揃えにすることはできません。

アクセスIDヘッダーのソースコードスニペットは次のとおりです。

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

質問は、ng-tableの特定の列のヘッダーを中央揃えにする方法は？

angularjsngtable
8
ggn979

@ OpenUserX03によって送信された回答は、次のようにクラス名を一重引用符で囲む必要があることを除いて、ほぼ完璧です。

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

header-class属性を使用して、ヘッダーのクラスを設定できます。

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

以前は、ng-tableヘッダーを左に揃える方法について同じ問題がありました。 ng-tableのドキュメントには、何も書かれていません。

これをすばやく行うには2つの方法があり、より「プロフェッショナル」な方法があります。

速い方法：

開くファイル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;
}

'professional' way：カスタムスタイルを作成し、次のようにWebサイトのcssファイルに追加します。

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

幸運を祈ります。

3
Theo Itzaris

まだこの問題を抱えている人、OPも、彼はまだ答えを受け入れていないので、これが私のやり方です。あなたのcss（任意の.css）で

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

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

0
Miguel Mota

ngTableの修正

1年後にこれを見た人のために。上記の解決策はどれも私にはうまくいきませんでした。これをカスタムcssファイルに追加しました：

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

ヘッダーのコンテンツを中央に配置しました（画像を参照）

これから：

left

これに：

center

0
Fergus