CODEWITHSUNDEEP
htmlcssangularangular-material-table
Noah Gaston
Noah Gaston

Reputation: 23

Can't change table size

I am trying to create a table and have it on the right side of the screen but I just can't get it to change size so it doesn't take up the whole screen without making everything become unaligned.

<table mat-table [dataSource]="dataSource" id = "skills" class = "skills">
<ng-container matColumnDef="Skill">
    <th mat-header-cell *matHeaderCellDef class = "name">
        <strong>Skill</strong>
    </th>
    <td mat-cell *matCellDef="let element" class = "name">
    {{element.name}}</td>
</ng-container>
<ng-container matColumnDef="Years of Experience">
    <th mat-header-cell *matHeaderCellDef class = "rank">
        <strong>Years</strong>
    </th>
    <td mat-cell *matCellDef="let element" class = "rank">
        {{element.exp}}
    </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

.skills {
    border: 1px;
    border-color: black;
    border-style: solid;
    margin: auto;
    display: table;
    width: 20vw;
    float: right;
}
.skills .name {
    text-align: center;
    margin: auto;
    border-left: 1px;
    border-right: 1px;
    border-style: solid;
    border-color: black;
}
.skills .rank {
    text-align: center;
    margin: auto;
    border-right: 1px;
    border-color: black;
    border-style: solid;
}
#skills {
    display: table;
    float: right;
}

I can change the display to decrease the size of the columns by adding skills as a class to the tag but then they are not only unaligned but start going from right to left.

Upvotes: 0

Views: 60

Answers (2)

Noah Gaston
Noah Gaston

Reputation: 23

I got it to work by using min-width while changing the display for the class from table to grid. I don't know why specifying a min-width will shrink it more than specifying a width though.

Upvotes: 0

Giuseppe Pereira Neiva
Giuseppe Pereira Neiva

Reputation: 1

Instead of using plain width try using max-width and min-width

Upvotes: 0

Related Questions