I have an Angular data table and it works fine. But when I am adding the option parameter " scrollY: '200px' " or " scrollY: '50vh' I get a bug in my Header. It isn´t responsive anymore, only when I do a click on the header, the sizing is changing.

When I am increasing the size of my window, the content of my table is responsive but the sizing of my header will not change:

header bug

When I do a click on my header, the sizing fits again to the rest of the table:

Header after click

I am using angular-datatables and Bootstrap 5.2. Here are the options I am using:

this.dtOptions = {
      pagingType: 'full_numbers',
      paging: false,
      processing: true,
      dom: "lfrti",
      scrollY: '200px',
      responsive:true,
      scrollCollapse: true,
      language:{
        search:"Suche"
      },
    };

And this is my HTML:

 <div >
      <table  datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger">
        <thead>
        <tr>
          <th>test</th>
          <th>test</th>
          <th>test</th>
          <th>test</th>
          <th>test</th>
          <th>test</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let user of users">
          <td>{{ user.name}}</td>
          <td>{{ user.username }}</td>
          <td>{{ user.email }}</td>
          <td>{{ user.role.name}}</td>
          <td>{{ user.lastLogin }}</td>
          <td>{{ user.permanent }}</td>
        </tr>
        </tbody>
      </table>
    </div>

CodePudding user response：

Adding this styling has solved my problem:

.dataTables_scrollHeadInner, .table{
  width:100%!important
}