how to make first td component not scrollable?

Question

I have a mat card which contains a table after horizontal line as in the screen. enter image description here

As you can see there are arrows allowing scrolling horizontally. You can see a text "Partcipant 1" and I don't manage to make him visible when scrolling. The rest of cells generated by loops should be scrollable

So this html allowing to display it (no full code I hope you will understand the idea) .

<mat-card>
<table #widgetsContent >
  <thead>
  <tr>
   <th></th>
   <th *ngFor="let date of dates">{{date.format('ddd DD')}}</th>
  </tr>
  </thead>
  
  <tr>
    <td>Participant 1</td>
    <td  *ngFor="loop for displaying other cells>
  </tr>
</mat-card>

mat-card{
display:flex;
display-direction:column;
}

table {
  width: 100%;
  display: inline-block;
  overflow-x: scroll;

  th {
    padding: 0 0.5rem;
    font-weight: normal;

    &:first-child {
      text-align: left;
      padding: 0;
    }
  }

  td,th {
    min-height: 50px;
    max-height: 50px;
  }

I tried to give Participant 1 position:fixed bit it sends the cell till the bottom of screen but I want it to to stay at his place no matter what scrren.