IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Fonction css calc ne fonctione pas pour le tag TH d'une table dans le cadre de Material Angular


Sujet :

Tableau en CSS

  1. #1
    Membre actif
    Profil pro
    Inscrit en
    Septembre 2006
    Messages
    726
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2006
    Messages : 726
    Points : 249
    Points
    249
    Par défaut Fonction css calc ne fonctione pas pour le tag TH d'une table dans le cadre de Material Angular
    Bonjour, j'essaye d'utiliser la fonction css calc pour spécifier la largeur de la colonne th dans l'utilisation des tables Angular Material

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
                <table  mat-table [dataSource]="dataSourceAppEnvRoleUsers" multiTemplateDataRows >
                    <!-- Application Column -->
                    <ng-container matColumnDef="role">
                        <th style="width: calc(25% - 15px);" mat-header-cell *matHeaderCellDef> Role </th>
                        <td mat-cell style="text-align: left !important;" *matCellDef="let element" [style.vertical-align]="element.users && element.users.length > 1 ? 'text-top' : 'middle'"><div title="{{element.name}}">{{element.name && element.name.length > 15 ? element.name.substring(0, 15) + '...' : element.name}}</div></td>
                    </ng-container>
     
                    <!-- Environment Column -->
                    <ng-container matColumnDef="description">
                        <th style="width: calc(50% - 30px);" mat-header-cell *matHeaderCellDef> Description </th>
                        <td mat-cell *matCellDef="let element" [style.vertical-align]="element.users && element.users.length > 1 ? 'text-top' : 'middle'">
                            <ng-template #tipContent8>{{element.description}}</ng-template>
                            <span title="{{element.description}}">{{element.description && element.description.length > 20 ? element.description.substring(0,20) + '...' : element.description ? element.description : ''}}</span>
                        </td>
                    </ng-container>
     
                    <!-- Users Column -->
                    <ng-container matColumnDef="users">
                        <th style="width: calc(25% - 15px);" mat-header-cell *matHeaderCellDef> Users </th>
                        <td mat-cell *matCellDef="let element"><ul style="margin: 0 0 0 15px !important; padding: 0 !important; text-align: left !important;"><li *ngFor="let user of element.users | userPipe:includeRejectedRemoved"><a style="cursor: pointer" title="Status: {{user.status}}" [style.color]="user.status === STATUS.DONE ? '#007bff' : user.status === STATUS.WITHDRAW ? 'red' : user.status === STATUS.NEW ? '#E4A598' : user.status === STATUS.VALIDATED ? 'green' : 'grey'" href="javascript:void(0)" (click)="displayUser(element, user)">{{user.firstName}} {{user.lastName}}</a></li></ul></td>
                    </ng-container>
     
    				                <!-- Actions Column -->
                    <ng-container matColumnDef="actions">
                        <th style="width: 60px;" mat-header-cell *matHeaderCellDef> Action</th>
                        <td mat-cell *matCellDef="let element">
                            <ng-template #tipContent4><div>Add User</div></ng-template>
                            <span [ngbTooltip]="tipContent4"><mat-icon (click)="addUser(element);" style="cursor: pointer;">person_add</mat-icon></span>
                        </td>
                    </ng-container>
     
                    <tr mat-header-row *matHeaderRowDef="displayedColumnsAppEnvRoleUsers"></tr>
                    <tr mat-row *matRowDef="let row; columns: displayedColumnsAppEnvRoleUsers;"
                        class="example-element-row"></tr>
                </table>

    Quand j'utilise juste des pourcentage ça marche mais pas la fonction calc. Pourquoi

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 933
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 933
    Points : 44 084
    Points
    44 084
    Par défaut
    Bonjour,
    à priori aucune raison, pour que les dimensions soient prises en compte il faut que la <table> ait un table-layout: fixed et soit dimensionnée.

    Il serait plus judicieux de nous fournir le HTML final généré pour pouvoir tester éventuellement !

  3. #3
    Membre émérite Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2008
    Messages
    1 896
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2008
    Messages : 1 896
    Points : 2 835
    Points
    2 835
    Par défaut
    Bonjour,

    Il n'est pas vraiment possible de mélanger les px et les % dans un tableau. Du moins pas comme ça ^^
    En effet, le navigateur va toujours essayer d'égaliser les colonnes autant que possible (c-à-d avoir la même largeur pour chacune) et d'arriver à 100%
    Le plus simple est de ne donner des tailles que pour les colonnes nécessaires et laisser le navigateur se débrouiller pour le reste

    Donc dans cet exemple, il suffit de donner la taille de 25% à la 1er et 3e colonne, la taille de 60px à la dernière colonne et le navigateur se débrouillera pour que la dernière colonne prenne tout l'espace restant (et c'est ce qu'on veut ici)

    Voici un exemple : https://codepen.io/DarkStar123456/pen/OJQWboE

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <table style="width:100%;" cellpadding="0" cellspacing="0">
      <tbody>
        <tr>
          <th style="background: red; width: 25%;">1</th>
          <th style="background: yellow;">2</th>
          <th style="background: green; width: 25%;">3</th>
          <th style="background: cyan; width: 60px;">4</th>
        </tr>
      </tbody>
    </table>

  4. #4
    Membre actif
    Profil pro
    Inscrit en
    Septembre 2006
    Messages
    726
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2006
    Messages : 726
    Points : 249
    Points
    249
    Par défaut
    Merci darkstar123456 et NoSmoking pour vos réponses.
    Je penses que la réponse de darkstar123456 est la bonne

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. fonction with pour lister une table dans excel
    Par gorjette dans le forum VBA Access
    Réponses: 2
    Dernier message: 25/09/2010, 10h48
  2. css ne s'applique pas pour balises ul et li imbriquées
    Par angelost dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 17/11/2009, 23h55
  3. Réponses: 7
    Dernier message: 12/06/2007, 15h59
  4. Réponses: 8
    Dernier message: 29/06/2006, 16h37

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo