Angular 14 Bootstrap 5 web page won't scale/resize to table/web page width on mobile devices

Question

The component.html:

<nav class="navbar navbar-expand-sm navbar-dark bg-dark" style="background-color: #EA600E!important">
  <div class="container-fluid">
    <a class="navbar-brand" href="#" style="font-size: 2rem;">
      <img src="assets/bootstrap-logo.svg" width="28" height="28" class="d-inline-block">
      TABLE GONE BAD
    </a>
  </div>
</nav>

<div class="container-fluid">
  <h2>Hello Bootstrap 5</h2>

  <table class="table table-striped table-sm">
    <thead>
      <th>Name</th>
      <th>Last name</th>
      <th>Nickname</th>
      <th>Bool 1</th>
      <th>Bool 2</th>
      <th>Bool 3</th>
    </thead>
    <tbody>
      <tr *ngFor="let person of people">
        <td>{{person.firstName}}</td>
        <td>{{person.lastName | uppercase}}</td>
        <td>{{person.nickname}}</td>
        <td>{{person.boolean1}}</td>
        <td>{{person.boolean2}}</td>
        <td>{{person.boolean3}}</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="6"><strong>Lorem ipsum dolor sit amet.</strong></td>
      </tr>
    </tfoot>
  </table>
</div>

Works fine on desktop even if I resize the window down to 500px wide. On mobile devices it won't resize to fit the table in, so one has to side scroll:

Also another minor problem, after resizing with fingers, the navbar is shorter than the page width in portrait mode, but it's okay in landscape mode:

I must admit I spent days trying to figure it out. So, you're welcome.

You can reproduce the problem on your mobile device by navigating to Table Gone Bad Web App.

Answer 1

Found a solution myself.

The component.html:

<table id="tbl-players" class="table table-striped table-sm">

styles.css:

@media screen and (max-width: 576px) {
  #tbl-players {
    font-size: 3vw;
  }
}

@media screen and (max-width: 768px) and (min-width: 577px) {
  #tbl-players {
    font-size: 2vw;
  }
}