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;
}
td.mat-cell{
border-bottom-style: none;
}
th.mat-header-cell{
border-bottom-style: none;
}
A much cleaner solution I found is to set elevation to 0 like this
<table mat-table class="mat-elevation-z0">
If you use mat-table instead, you have just to do the following
mat-header-row, mat-row{
border-bottom-style: none;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With