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