CSS

Responsive Table Style

#rt {
    width: 100%;
    border: 2px solid #ccc;
    border-collapse: collapse;
    }
#rt th, #rt td {
    padding: 3px;
    }
#rt th {
    text-align: left;
    background-color: #eee;
    padding: 5px;
    outline:1px solid #ccc;
    }

#rt td {
    padding-left: 5px;
    }

@media (max-width: 570px) {
    #rt {
        width: 100%;
        border: 2px solid #ccc;
        border-collapse: collapse;
        }
    #rt th, #rt td {
        display: block;
        padding: 3px;
        }
    #rt td::before {
        content: attr(data-header);
        font-weight: bold;
        display: inline-block;
        width: 50%;
        text-align: right;
        padding-right: 20px;
        }
    #rt th {
        text-align: left;
        background-color: #eee;
        padding: 5px;
        outline:1px solid #ccc;
        }
    #rt th[scope="col"] {
        display: none;
        }
    #rt td {
        padding-left: 5px;
        }
}

table responsive

<div class="table-responsive-lg">
  <table class="table">
    ...
  </table>
</div>

responsive table

<!--Table-->
<table class="table table-striped w-auto">

  <!--Table head-->
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Surname</th>
      <th>Country</th>
      <th>City</th>
      <th>Position</th>
      <th>Age</th>
    </tr>
  </thead>
  <!--Table head-->

  <!--Table body-->
  <tbody>
    <tr class="table-info">
      <th scope="row">1</th>
      <td>Kate</td>
      <td>Moss</td>
      <td>USA</td>
      <td>New York City</td>
      <td>Web Designer</td>
      <td>23</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Anna</td>
      <td>Wintour</td>
      <td>United Kingdom</td>
      <td>London</td>
      <td>Frontend Developer</td>
      <td>36</td>
    </tr>
    <tr class="table-info">
      <th scope="row">3</th>
      <td>Tom</td>
      <td>Bond</td>
      <td>Spain</td>
      <td>Madrid</td>
      <td>Photographer</td>
      <td>25</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td>Jerry</td>
      <td>Horwitz</td>
      <td>Italy</td>
      <td>Bari</td>
      <td>Editor-in-chief</td>
      <td>41</td>
    </tr>
    <tr class="table-info">
      <th scope="row">5</th>
      <td>Janis</td>
      <td>Joplin</td>
      <td>Poland</td>
      <td>Warsaw</td>
      <td>Video Maker</td>
      <td>39</td>
    </tr>
    <tr>
      <th scope="row">6</th>
      <td>Gary</td>
      <td>Winogrand</td>
      <td>Germany</td>
      <td>Berlin</td>
      <td>Photographer</td>
      <td>37</td>
    </tr>
    <tr class="table-info">
      <th scope="row">7</th>
      <td>Angie</td>
      <td>Smith</td>
      <td>USA</td>
      <td>San Francisco</td>
      <td>Teacher</td>
      <td>52</td>
    </tr>
    <tr>
      <th scope="row">8</th>
      <td>John</td>
      <td>Mattis</td>
      <td>France</td>
      <td>Paris</td>
      <td>Actor</td>
      <td>28</td>
    </tr>
    <tr class="table-info">
      <th scope="row">9</th>
      <td>Otto</td>
      <td>Morris</td>
      <td>Germany</td>
      <td>Munich</td>
      <td>Singer</td>
      <td>35</td>
    </tr>
  </tbody>
  <!--Table body-->


</table>
<!--Table-->