Wrap table row alla riga successiva

<table id="table_id"> 
    <tr> 
    <td>testtesttesttest</td> 
    <td>testtesttesttest</td> 
    </tr> 
</table>

Mi piacerebbe che se la tabella non si adatta allo schermo, quindi alla seconda cella del tavolo verrà trasferita su un'altra riga in basso? Non il testo nella cella, ma l'intera cella.Wrap table row alla riga successiva

fonte

2013-06-18 Leo Loki

[Possibile duplicato di questa domanda] (http://stackoverflow.com/questions/13792728/use-jquery -to-move-columns-in-order-to-next-tr-when-page-is-ridimensionato) – eggy

@eggy Decisamente no. Non tutto è jQuery. – Keelan

@Keelan Ora, tutto è in media. –

Cambiare le cellule a INLINE blocchi:

#table_id { 
 
    display: block; 
 
} 
 

 
#table_id td { 
 
    display: inline-block; 
 
} 
 

 
td { 
 
    background: green 
 
}

<table id="table_id"> 
 
    <tr> 
 
    <td>testtesttesttest</td> 
 
    <td>testtesttesttest</td> 
 
    </tr> 
 
</table>

jsfiddle

fonte

2013-06-18 02:50:15

Sei un dio dei CSS !! Ogni altra risposta afferma che è impossibile, ma questo ha funzionato. La mia situazione era tale che non potevo cambiare la tabella in div poiché veniva generata da un plugin che non autore. – KalenGi

Bello. C'è un modo per "avvolgere" intere colonne, vale a dire quando una cella si avvolge in una riga, per avvolgere la stessa cella anche in altre righe? – rustyx

@rustyx: (un po 'tardi, forse, ma) ciò che funziona per me, è impostare una larghezza sulle celle della tabella (in em-unità in modo che si ridimensiona con lo zoom dell'utente). –

Questo non può essere eseguito con una tabella, la griglia "riga e colonna" è fissa.

Tuttavia si potrebbe usare inline-block elementi:

<div id="container"> 
    <div>testtesttesttest</div> 
    <div>testtesttesttest</div> 
</div>

CSS:

#container>div {display:inline-block;vertical-align:top}

fonte

2013-06-18 02:34:03

Migliorato su Jukka's answer.

HTML:

<table id="table_id"> 
<tr> 
<td> testtesttesttest</td> 
<td> testtesttesttest </td> 
<td> testtesttesttest </td> 
<td> testtesttesttest </td> 
<td> testtesttesttest </td> 
</tr> 
<tr> 
<td> testtesttesttest</td> 
<td> testtesttesttest</td> 
<td> testtesttesttest</td> 
<td> testtesttesttest</td> 
<td> testtesttesttest</td> 
</tr> 
</table>

CSS:

#table_id {display: block; } 
#table_id td {display: inline-block; border: 3px solid #FFFFFF;} 
td { background: green; 
    border: 3px solid #FFFFFF;} /* to show cell sizes */

Visita http://jsfiddle.net/zjbyE/391

fonte

2016-11-10 10:39:32

Wrap table row alla riga successiva

risposta

Problemi correlati