Tavole reattive, il modo intelligente

Question

Ho una tabella che contiene dati. Dati tabulari E sembra così.

Vedi this fiddle.

Ora quello che vorrei dire, quando è visualizzata su uno schermo più stretto, per la tavola a guardare come questo, in modo che non si ottiene una barra di scorrimento orizzontale e si mantiene la stessa struttura visiva:

(o se si vuole, come this fiddle.)

Ora la mia domanda è: come si fa a farlo? Preferirei un modo solo CSS, ma finora non sono riuscito a farlo solo in CSS. (Il secondo violino contiene rowspan attributi, che non hanno equivalenti CSS.)

Il codice HTML è lato server generato, così ho potuto generare uno dei due layout a seconda della larghezza della finestra, ma poi si wouldn' t rispondere a un ridimensionamento della finestra.

Non sono contro un piccolo Javascript, ma in questo caso, per tradurre la prima tabella nella seconda in una finestra di ridimensionamento, dovrebbe essere smontata e ricostruita, cella per cella, e penso che sia eccessivo . Sto ancora cercando una query multimediale che possa fare tutto il lavoro.

Sperimentando un po ', sono arrivato a this close, ma questo non funziona in IE8 e IE9.

Quindi, qualcuno ha qualche idea su come affrontarlo? La soluzione ideale funzionerebbe su celle di tabella di altezza variabile (2 righe di testo o più) e qualsiasi numero di colonne.

Answer 1

È possibile bloccare in linea gli elementi. Non ho avuto molto tempo per giocare, ma qualcosa di simile al seguente:

#content { 
    border:1px solid; 
    border-collapse:collapse; 
} 
#content td, #content th { 
    border:1px solid; 
    text-align:left; 
    padding:.07em .2em; 
    white-space:nowrap; 
    font-weight:400; 
} 
#content td { 
    display: inline-block; 
    width: 100px; 
} 

Non è la creazione più bella, però!

http://jsfiddle.net/8H3bN/

Answer 2

ya come il codice HTML è lo stesso è possibile modificare gli stili per le proprietà CSS in base alla media query una soluzione migliore sarebbe essere- fiddle

@media only screen and (min-width: 769px) { 
     #content { 
    border:1px solid; 
    border-collapse:collapse; 
} 
#content td, #content th { 
    border:1px solid; 
    text-align:left; 
    padding:.07em .2em; 
    white-space:nowrap; 
    font-weight:400; 
} 
} 
@media only screen and (max-width: 768px) { 
#content { 
    border:1px solid; 
    border-collapse:collapse; 
} 
#content tr { 
    height:4em; border-bottom:1px solid; 
} 
#content th { 
    border:1px solid; 
    text-align:left; 
    padding:.07em .2em; 
    white-space:nowrap; 
    font-weight:400; 
    height:4em; 
} 
#content td { 
    padding:.07em .2em; 
    white-space:nowrap; 
    height:1.4em; 
    display:inline; 
} 
#content td:not(:last-child)::after { 
    display:block; content:''; 
    height:0; 
    border-bottom:1px solid; 
} 

} 

una possibile soluzione è quella di utilizzare media query e nascondere i rispettivi blocchi o cambiare gli stili di conseguenza

qui è un fiddle
cambiato più piccolo tavolo id per Content2

@media only screen and (max-width: 768px) { 
    #content{ 
     display:none !important; 
    } 
} 
@media only screen and (min-width: 769px) { 
    #content2{ 
     display:none !important; 
    } 
} 

Answer 3

So che questo non è esattamente quello che si vuole, ma ho creato un jsfiddle qualche tempo fa come riferimento che potrebbe aiutare: jsfiddle.net/webbymatt/MVsVj/1

essenzialmente il markup rimane lo stesso, non c'è JS e il contenuto si riflette solo come previsto. è sufficiente aggiungere l'attributo del tipo di dati alla cella della tabella.

Answer 4

Controllare questo CodePen.

Ho trovato questa soluzione molto tempo fa in css-tricks.com.

le tabelle vengono un po 'disordinato:

<table> 
    <tr> 
     <td> 
      Description 1 
     </td> 
     <td> 
      <table class="responsive" cellpadding="0" cellspacing="0"> 
       <tbody> 
        <tr> 
         <td class="text-center">Data 1A</td> 
         <td class="text-center">Data 1B</td> 
         <td class="text-center">Data 1C</td> 
        </tr> 
       </tbody> 
      </table>     
     </td> 
    </tr> 
    <tr> 
     <td> 
      Description 2 
     </td> 
     <td> 
      <table class="responsive" cellpadding="0" cellspacing="0"> 
       <tbody> 
        <tr> 
         <td>Data 2A</td> 
         <td>Data 2B</td> 
         <td>Data 2C</td> 
        </tr> 
       </tbody> 
      </table>     
     </td> 
    </tr> 
</table> 

e questo è il css:

/* Small display targeting */ 
    @media only screen and (max-width: 767px) { 
     /* Force table to not be like tables anymore */ 
     .responsive, .responsive thead, .responsive tbody, .responsive th, .responsive td, .responsive tr { 
      display: block; 
     } 

     /* Hide table headers (but not display: none;, for accessibility) */ 
     .responsive thead tr { 
      position: absolute; 
      top: -9999px; 
      left: -9999px; 
     } 

     .responsive td { 
      /* Behave like a "row" */ 
      position: relative; 
     } 

     .responsive td:before { 
      /* Now like a table header */ 
      position: absolute; 
     } 
    }