how to adapt table html css for mobile by thead

Question

The question is whether it is possible to make adaptations for mobile devices as shown below, javascript is also considered. [figma mobile visability][1] I tried to do it via flex,inline but it didn't work. The thing is, I need it to display in columns, but after hours of searching I could not find anything [pc html code][2]

day1
pos1 
pos2

<table>
      <thead>
        <tr>
          <th>day1</th>
          <th>day2</th>
          <th>day3</th>
          <th>day4</th>
          <th>day5</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>pos1</td>
          <td>pos1</td>
          <td>pos1</td>
          <td>pos1</td>
          <td>pos1</td>
        </tr>
        <tr>
          <td>pos2</td>
          <td>pos2</td>
          <td>pos2</td>
          <td>pos2</td>
          <td>pos2</td>
        </tr>
      </tbody>
    </table> 

table {
  width: 100%;
  border-collapse: collapse;
}
th {
  background: #333;
  color: white;
  font-weight: bold;
}
td,
th {
  padding: 6px;
  border: 1px solid #ccc;
  text-align: left;
} ```


  [1]: https://i.stack.imgur.com/7ajmF.png
  [2]: https://i.stack.imgur.com/3FCU3.png

Answer 1

It's not easy to get what you intend to do with the table element. The only solution would be to create a table for each column and set up a grid system that changes the width of the tables according to the screen size. The easiest way is to use a css framework grid system like Bootstrap and not use the table element

 .my-table{ margin: 3px; }.header-col { background: #333; color: white; font-weight: bold; }.table-col >* { padding: 6px; border: 1px solid #ccc; text-align: left; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" /> <div> <div class="row my-table"> <div class="col-md"> <div class="row table-col"> <div class="col-12 header-col">day 1</div> <div class="col-12">day 1 row 1</div> <div class="col-12">day 1 row 2</div> </div> </div> <div class="col-md"> <div class="row table-col"> <div class="col-12 header-col">day 2</div> <div class="col-12">day 2 row 1</div> <div class="col-12">day 2 row 2</div> </div> </div> <div class="col-md"> <div class="row table-col"> <div class="col-12 header-col">day 3</div> <div class="col-12">day 3 row 1</div> <div class="col-12">day 3 row 2</div> </div> </div> <div class="col-md"> <div class="row table-col"> <div class="col-12 header-col">day 4</div> <div class="col-12">day 4 row 1</div> <div class="col-12">day 4 row 2</div> </div> </div> <div class="col-md"> <div class="row table-col"> <div class="col-12 header-col">day 5</div> <div class="col-12">day 5 row 1</div> <div class="col-12">day 5 row 2</div> </div> </div> </div> </div>