How to remove borders of angular material table?

Question

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

Butene

Hmm.. Just to get you right you want to remove the border surrounding the mat-table? Meaning there will be no gaps between the table and the top menu bar? – Scutate

Yes that is exactly what i need – Butene

Answer 1

td.mat-cell{
    border-bottom-style: none;
}

th.mat-header-cell{
    border-bottom-style: none;
}

Ketron

Answer 2

A much cleaner solution I found is to set elevation to 0 like this

<table mat-table class="mat-elevation-z0"> 

Ryan

Answer 3

If you use mat-table instead, you have just to do the following

mat-header-row, mat-row{
  border-bottom-style: none;
}

Dragster

Answer 4

I am using angular 16.2.1 The class names have changed.

.mat-mdc-header-cell, .mat-mdc-cell {
    border-bottom: none;
}

Righthand