web-dev-qa-db-fra.com

Comment centrer l'en-tête de table d'alignement?

Tous, j'utilise ng-table pour la grille. J'utilise l'extrait de code suivant pour définir la colonne.

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

enter image description here

Mais je ne suis pas capable de centrer aligner l'en-tête de colonne mais les données de colonne.

Voici l'extrait de code source pour l'en-tête d'identifiant d'accès.

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

La question est, comment centrer l’en-tête pour une colonne particulière dans ng-table?

angularjsngtable
8
ggn979

La réponse soumise par @ OpenUserX03 est presque parfaite, sauf que vous devez mettre le nom de la classe entre guillemets, comme suit:

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

Vous pouvez utiliser l'attribut header-class pour définir la classe - vous l'avez deviné - de l'en-tête.

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

j'avais l'habitude d'avoir le même problème: comment aligner les en-têtes de gauche de ma table. sur la documentation de ng-table, il ne dit rien ni sur les exemples.

vous avez deux façons de le faire rapidement et le plus "professionnel"

voie rapide:

open files ng-table/dist/ng-table.css et ng-table.min.css , en fonction du fichier CSS que vous utilisez. sur la première ligne, il gère l'en-tête,

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

Manière 'professionnelle': Crée un style personnalisé et l'ajoute au fichier css de ton site web, comme ceci:

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

L'espoir aide, bonne chance.

3
Theo Itzaris

À tous ceux qui ont encore ce problème, y compris OP, puisqu'il n'a pas encore accepté de réponse, voici comment je le fais. dans vos css (any .css)

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

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

0
Miguel Mota

Correction pour ngTable

Pour ceux qui voient cela un an plus tard. Aucune des solutions ci-dessus n'a fonctionné pour moi. J'ai ajouté ceci à un fichier CSS personnalisé:

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

Qui a centré le contenu dans l'en-tête (voir images)

À partir de ceci:

 left

À ceci:

 center

0
Fergus