Visualizzazione dei risultati da 1 a 4 su 4
  1. #1
    Utente di HTML.it
    Registrato dal
    Jul 2005
    Messaggi
    2,546

    responsive ogni 2 celle

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

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,048
    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
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web. Ti resta... humm spè
    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

    "Mi son documentato"

  3. #3
    Utente di HTML.it
    Registrato dal
    Jul 2005
    Messaggi
    2,546
    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

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,048
    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:
    codice HTML:
    <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>
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web. Ti resta... humm spè
    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

    "Mi son documentato"

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.