How to remove borders of angular material table?
13,149
Solution 1
td.mat-cell{
border-bottom-style: none;
}
th.mat-header-cell{
border-bottom-style: none;
}
Solution 2
A much cleaner solution I found is to set elevation to 0 like this
<table mat-table class="mat-elevation-z0">
![Admin](/assets/logo_square_200-5d0d61d6853298bd2a4fe063103715b4daf2819fc21225efa21dfb93e61952ea.png)
Author by
Admin
Updated on June 13, 2022Comments
-
Admin about 2 years
I made an angular material table and when i zoom out i see some borders of the whole table which i dont know why are there. I really don't want to see them any ideas what to do??
[1]: https://ibb.co/56mhnKs this is the link to my screenshot so you can see which borders i mean.
So as you can see in the screen shot i want to remove that top and bottom huge border.
This is my code
<div class="table-responsive"> <div class="tickets-table" style="width: 85%; max-width: 1600px; border: white"> <table mat-table class="table-striped" style="width: 100%" [dataSource]="dataSource" matSort aria-label="Elements"> <tbody> <!-- Id Column --> <ng-container matColumnDef="id"> <th mat-header-cell *matHeaderCellDef mat-sort-header>Ticket ID</th> <a><td mat-cell *matCellDef="let row">{{row.id}}</td></a> </ng-container> <!-- Subject Column --> <ng-container matColumnDef="subject"> <th mat-header-cell *matHeaderCellDef mat-sort-header>Title/Subject</th> <a><td mat-cell *matCellDef="let row">{{row.subject}}</td></a> </ng-container> <!-- Last updated Column --> <ng-container matColumnDef="status"> <th mat-header-cell *matHeaderCellDef mat-sort-header>Last updated</th> <a><td mat-cell *matCellDef="let row">{{row.created}}</td></a> </ng-container> <!-- Status Column --> <ng-container matColumnDef="created"> <th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th> <a><td mat-cell *matCellDef="let row">{{row.status}}</td></a> </ng-container> <!--Header--> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row (click)="selectRow(row.id)" *matRowDef="let row; columns: displayedColumns;"></tr> </tbody> </table>
This is the CSS. Also if you could tell me how to make the white border around the whole table would be nice.
.tickets-table { overflow: auto; margin: 40px auto; /*position: relative;*/ padding-right: 15px; padding-left: 15px; border: white; align-self: stretch; } .mat-header-cell { color: white; background-color: #000046; padding: 20px; border-color: white; align-self: stretch; } .mat-cell { width: fit-content; height: 1px; border-color: white; align-self: stretch; } .mat-row:nth-child(even){ background-color: #000051; } .mat-row:nth-child(odd){ background-color: #303061; }