Stack due <td> uno sopra l'altro

Attualmente sto lavorando per rendere un sito reattivo ma il problema è che devo renderlo reattivo senza toccare il contenuto della pagina. Quindi tutto rimane uguale nella pagina, ma con un nuovo foglio di stile e un po 'di Javascript (ma principalmente CSS) sto cercando di realizzare questo compito.Stack due <td> uno sopra l'altro

Il sito Web è realizzato principalmente con tabelle .. quindi quando il browser viene ridimensionato (o accessibile con un dispositivo mobile), voglio che il secondo 'td' dentro il mio 'tr' si impili sotto il primo invece di essere entrambi vicini l'uno all'altro.

Ho dato all'elemento 'td' un float sinistro e una larghezza del 100% e ha funzionato bene in Firefox, ma in Chrome & Safari, entrambi 'td' sono il 50% e sulla stessa riga.

Fammi sapere se hai qualche idea, tutto è apprezzato!

fonte

2013-03-22 user990460

Non utilizzare tabelle per il layout. – Oded

Ho paura che non sia così che funzionano i TD. I TD rimangono su una riga e possono essere posizionati su un'altra linea inserendoli in un'altra TR. –

-Oded, come ho detto, il contenuto non è nel mio controllo. Il contenuto della pagina è generato e non ho accesso a quel codice. -Billy, lo capisco, ma è per questo che sto chiedendo qui, quindi forse qualcuno ha una soluzione di qualche tipo. – user990460

Hai provato a inserire due div s nella cella della tabella con uno float left su di essi. Quando il tavolo crolla, dovrebbero raggrupparsi.

fonte

2013-03-22 13:05:16 Paul

Grazie per la rapida risposta. È un sito web governativo, quindi non posso toccare nessuno dei contenuti della pagina. Come ho risposto sopra, il contenuto è generato e non ho accesso a questo. Sto solo cercando di creare una soluzione mobile per il sito web. Per quanto vorrei che il sito fosse realizzato con div, per ora non è possibile. In futuro forse se si renderanno conto che il sito Web è obsoleto, sarò in grado di fare un buon lavoro, ma per ora non è in mio potere. – user990460

Prova con i CSS cambiare il display, così si va a l'altra linea:

td { 
    display: block; 
    clear:both; 
}

vedere un esempio just made

fonte

2013-03-22 13:07:21 pdjota

Grazie! Qualcuno ha anche fatto qualcosa di simile. Ci proverò ora. – user990460

è stato suggerito il chiaro se fosse necessario usare float (destra o sinistra) per assicurarsi che vada sull'altra linea. – pdjota

Sembra che si sta utilizzando tabelle per il layout e non dati tabulari. Le tabelle devono essere solo da utilizzare per i dati tabulari.

Avresti bisogno di usare grouping content invece; più specificamente, la div element:

<div> 
    <div>Top</div> 
    <div>Bottom</div> 
</div>

Vale la pena notare che a seconda del tipo di contenuti è presente all'interno del vostro superiore e contenitori inferiori si consiglia di utilizzare un different element altogether.

fonte

2013-03-22 13:07:26

Come ho risposto su altre risposte, so che questo è il modo migliore, ed è così che solitamente lo faccio. Ma non ho il controllo sul contenuto della pagina del sito, mi è stato appena chiesto di provare e realizzare una soluzione mobile per il sito. Quindi, per quanto lo odio, non posso farci niente. Grazie! – user990460

Purtroppo non può modificare il contenuto originale in quel modo. – Paul

Il problema è che una tabella è una tabella. Una tabella ha righe e colonne. Quello che stai cercando di fare è trasformare un tavolo in qualcosa che * non è * un tavolo. Dovrai parlare con chiunque abbia il controllo sul contenuto e farlo cambiare. –

Che cosa stai cercando di fare non funzionerà o causerà un forte mal di testa. Le tabelle non sono progettate per essere utilizzate per la progettazione reattiva. Se dici che non puoi toccare il codice, allora sei molto bloccato. Il modo migliore per aggirare il problema sarebbe quello di riscrivere il codice e sostituire qualsiasi tabella con DIV, Ps ecc. Se pertinente e utilizzare le query CSS, jquery e media per rendere il tuo sito reattivo.

L'unico modo è possibile provare a rendere il sito reattivo attualmente sarebbe quella di utilizzare jQuery sul caricamento della pagina per sostituire tutte le tabelle con i div, Ps ecc e poi andare su come utilizzare i CSS, jQuery e media query per cercare di rendere il sito reattivo. Questo non è un modo consigliato per farlo e non posso nemmeno garantire che funzionerà al 100%.

fonte

2013-03-22 13:07:44 llanato

Finalmente qualcuno che ha letto tutto quello che ho detto. Non ho alcun controllo sui contenuti generati, è un sito governativo, quindi è obsoleto, ma non fanno nulla al riguardo, quindi devo lavorare con quello che ho ... che è il layout della tabella. Grazie per la risposta però! Volevo evitare jQuery il più possibile perché so che non è il modo migliore per farlo. – user990460

Utilizzare display:block sul numero tr td per adattare il layout.

tr td { 
 
    padding: 20px 40px; 
 
    border: 1px solid black; 
 
    display: block; 
 
}

<table> 
 
    <tr> 
 
    <td>Damn</td> 
 
    <td>This</td> 
 
    <td>Table</td> 
 
    <td>Layout</td> 
 
    </tr> 
 
</table>

fonte

2013-03-22 13:08:04 Bigood

Grazie! Ci proverò. – user990460

Questa dovrebbe essere contrassegnata come la risposta corretta –

Un'altra possibilità è quella di nido il sito del governo all'interno di un iframe, in questo modo è possibile utilizzare qualcosa come jQuery per fare quello che vuoi al sito.

fonte

2013-03-22 13:14:10 Paul

Ciò dipende interamente dall'accesso che il documento contenente avrebbe sul contenuto dell'iframe. –

L'idea è che funzioni sul lato client sul markup che è già stato generato - il server non può davvero limitare ciò che è già stato passato ... – Paul

Stack due <td> uno sopra l'altro

risposta

Problemi correlati