如何通過thead為手機適配表html css

Question

問題是是否可以對移動設備進行如下所示的適配，javascript也在考慮中。 [figma mobile visability][1] 我嘗試通過 flex,inline 來實現，但沒有成功。 問題是，我需要它在列中顯示，但經過數小時的搜索，我找不到任何東西 [pc html 代碼][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

要獲得您打算對表格元素執行的操作並不容易。 唯一的解決方案是為每一列創建一個表格，並設置一個網格系統，根據屏幕大小改變表格的寬度。 最簡單的方法是使用像 Bootstrap 這樣的 css 框架網格系統而不使用表格元素

 .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>