La pregunta es si es posible hacer adaptaciones para dispositivos móviles como se muestra a continuación, también se considera javascript. [visibilidad móvil de figma][1] Traté de hacerlo a través de flex,inline pero no funcionó. El caso es que necesito que se muestre en columnas, pero después de horas de búsqueda no pude encontrar nada [código html de pc][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.pngNo es fácil obtener lo que pretende hacer con el elemento de tabla. La única solución sería crear una tabla para cada columna y configurar un sistema de cuadrícula que cambie el ancho de las tablas según el tamaño de la pantalla. La forma más fácil es usar un sistema de cuadrícula de marco css como Bootstrap y no usar el elemento de tabla
.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>