how to adapt table html css for mobile by thead-CodePudding

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

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
  crossorigin="anonymous"
/>

<div>
  <div >
    <div >
      <div >
        <div >day 1</div>
        <div >day 1 row 1</div>
        <div >day 1 row 2</div>
      </div>
    </div>
    <div >
      <div >
        <div >day 2</div>
        <div >day 2 row 1</div>
        <div >day 2 row 2</div>
      </div>
    </div>
    <div >
      <div >
        <div >day 3</div>
        <div >day 3 row 1</div>
        <div >day 3 row 2</div>
      </div>
    </div>
    <div >
      <div >
        <div >day 4</div>
        <div >day 4 row 1</div>
        <div >day 4 row 2</div>
      </div>
    </div>
    <div >
      <div >
        <div >day 5</div>
        <div >day 5 row 1</div>
        <div >day 5 row 2</div>
      </div>
    </div>
  </div>
</div>