Evitar mudança de design de tabela em celulares com tema Asap

Manuel275 · 09/04/2023

Alguien sabe como puedo evitar que las tablas e vean de la siguiente forma en móviles, estoy utilizando el tema Asap.

Puko · 09/04/2023

Tienes que usar Media query ...
por ejemplo:

si el <div>/tabla principal que contiene lo de adentro (dias, numeros, etc.) tiene width: 200px (en pc)
al verlo en un movil de menor tamaño y con min-width 340px
se cambia a width: 50px cuando detecta 339px ....

O al contrario ... si el <div>/tabla principal no tiene width, se lo aplicas a los elementos de adentro y el principal se 'adapta'.

Federico99 · 10/04/2023

Para la próxima update que sale en breve cambiaremos como se ve la tabla en móviles, y se podrá hacer scroll horizontal 🙂

Sabogal · 12/04/2023

Yo lo hago de la siguiente forma:

Inserir CODE, HTML ou PHP:

tbody{
    width:100%;
    display:inline-table
}


  table {
    border-collapse: collapse;
    overflow-x:auto;
    display:flex;
    margin:30px 0;
    width: 100%;
  
  }

  th {
    background-color: #f2f2f2;
    font-weight: bold;
    text-align: left;
    padding: 8px;
    border: 1px solid #ccc;
  }
  tr:nth-child(even) td {
    background-color: #f5f5f5;
  }

  tr:nth-child(odd) td {
    background-color: #fff;
  }
  td {
    background-color: #fff;
    text-align: left;
    padding: 8px;
    border: 1px solid #ccc;
  }

  tr:hover td {
    background-color: #e5e5e5;
  }

Evitar mudança de design de tabela em celulares com tema Asap

Manuel275

Puko

Federico99

Sabogal