Mi chiedo se sia possibile riorganizzare le celle della tabella HTML utilizzando solo CSS.Le celle della tabella HTML possono essere ridisposte con i CSS?
Per esempio può questo
------------------------------------------------
| A | B | C |
------------------------------------------------
essere visualizzato come:
------------------------------------------------
| C | A | B |
------------------------------------------------
o forse anche questo:
-------------------------
| A |
-------------------------
| B | C |
-------------------------
Questo è possibile solo con i CSS o è necessario modificare i nodi HTML?
EDIT: Alcuni di voi sono state chiedendo il motivo per cui questo è necessario a tutti, ecco il problema di vita reale che sto affrontando:
Voglio visualizzare un elenco dei problemi segnalati dagli utenti:
------------------------------------------------------------------------------
| Problem description (A) | Reporting user (B) | Link to affected entity (C) |
------------------------------------------------------------------------------
Volevo valutare vari layout. La prima variante di layout enfatizzerebbe l'utente segnalante, la seconda enfatizzerebbe la descrizione del testo.
Non ho alcun problema nel cambiare la struttura, e infatti l'ho già fatto, ma mentre stavo codificandolo, mi chiedevo se fosse possibile farlo con i CSS. (Solo pura curiosità)
È qualcosa che funziona solo nei browser moderni accettabile? – thirtydot
Ti stai riferendo in particolare alle celle di una tabella, come se usassi gli elementi ''
Perché stai facendo questo con i CSS?Se vuoi cambiare il significato/struttura della tabella, cambia l'HTML. – BoltClock
risposta
Si può, ma non è la cosa migliore da fare però (vedi altre risposte).
Ecco il mio esempio:
View on JSFiddle
fonte
2011-09-10 17:07:42
Tecnicamente quando si definisce 'float: left | a destra; 'per gli elementi' display: table-cell' li stai rimuovendo completamente dalla gestione del layout della tabella. Ad esempio, se vuoi rendere le celle nella riga della stessa altezza, il tuo approccio non funzionerà. Vedere: http://jsfiddle.net/ye8Qa/1/ –
@ c-smile, corretto al 100%. Ho affermato che questa non è la cosa migliore da fare e il tuo commento è un altro motivo per cui. La domanda inoltre non ha indicato che doveva aderire alla gestione del layout della tabella - anche se probabilmente era sottintesa;) –
Al momento non è disponibile in CSS.
CSS3 offrirà flexbox model in una forma o nell'altra (il lavoro su di esso è in sviluppo attivo al momento in W3C). Dovrebbe permetterti di fare quello che vuoi.
fonte
2011-09-10 17:06:58
si può fare in modo sporco, si può sempre provare ad utilizzare la funzione di galleggiante.
ma per l'ultimo disegno che hai fornito a titolo di esempio, penso che si dovrebbe essere in grado di giocare con la larghezza (in alto uno dovrebbe essere width: 100%; e gli altri 2 dovrebbe essere del 50%)
fonte
2011-09-10 17:27:47 ahoura
puoi fare tutti e tre, con il markup corretto, anche se aggiunto, e un tocco di css. http://jsfiddle.net/jalbertbowdenii/xvBhF/
avvertimento giusto: io non sono sicuro di come bene di in grado di gestire la manipolazione dei dati da tavolo come questo, voglio dire solo che non lo fanno, ma a prescindere, se si sta andando pubblico allora probabilmente vuole prendere in considerazione quella. Sono sicuro che c'è un modo con tutti gli aromi degli attributi html che vengono solo in stile tabella.
fonte
2011-09-11 06:32:32 albert
Problemi correlati