responsive ogni 2 celle

[djjunior]

salve
ho questa tabella
TAB1.jpg
come posso farla responsive ogni 2 celle così?
TAB2.jpg
Grazie

[KillerWorm]

Ciao, tempo fa avevo elaborato una soluzione per un problema simile, usando dei <tbody> per riuscire a spezzare la serie di colonne e impostando opportunamente il CSS per ridistribuirle.

Qui il Pen: Responsive table - row groups in row

Vedi se può fare al caso tuo; chiaramente dovrai adeguarlo secondo le tue esigenze.

Buon proseguimento

[djjunior]

Grazie killerworm, l'ho adattato alle mi esigenze, ma ho difficoltà ad impostare la dimensione massima della tabella, io ho utilizzato solo 3 colonne , ho provato nella classe rtable etc ma nulla , la dimensione come se restasse fissa

[KillerWorm]

Non puoi impostare una larghezza all'intera tabella per via della sua natura responsive. Puoi però dare una larghezza ai <td> in modo che la tabella stessa si dimensioni a sua volta.

Vedi se queste modifiche possono andare:

<style>
body {
  text-align: center;
  font-family: sans-serif;
}

.rtable {
  display: inline-table;
  border-collapse: collapse;
}

.rtable th,
.rtable td {
  color: #0f75bd;
  background: #fff;
  padding: 8px 12px;
  border: 1px solid #0f75bd;
}

.rtable th {
  font-weight: normal;
  text-align: left;
}
.rtable td {
  font-weight: bold;
  width: 200px
}

@media only screen and (min-width: 600px) {
  .rtable {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .rtable tbody {
    margin-left: -1px;
  }
}
</style>

<h1>Responsive table</h1>
<table class="rtable">
  <tbody>
    <tr><th>Num<td>XX</tr>
    <tr><th>Inserito il<td>XX</tr>
  </tbody>
  <tbody>
    <tr><th>Rep<td>XX</tr>
    <tr><th>Accettato il<td>XX</tr>
  </tbody>
  <tbody>
    <tr><th>Op<td>XX</tr>
    <tr><th>Stato<td>XX</tr>
  </tbody>
</table>