Righe di tabelle nidificate HTML CSS

Non ho mai lavorato molto con le tabelle HTML complesse. Ho bisogno di una tabella con colonne e righe annidate. Ho provato a crearlo, ma ha molte tabelle e il numero di bordi appare ovunque. Ecco il jsFiddle, che ho provato. Allora, che cosa ho intenzione di raggiungere è:Righe di tabelle nidificate HTML CSS

singolo <table> tag per tutto ciò che la struttura non dovrebbe apparire
confini multipli.
Tutta la struttura dovrebbe essere una singola tabella, le righe non devono separarsi dalla sua posizione durante il ridimensionamento della pagina. (Il che accade nel mio caso)

fonte

2015-04-21 trex

Solo per cursiosity: che cosa stai cercando di raggiungere con questa struttura? Mi sembra che lo stiate usando per disegnare celle di tabelle complesse? – thomaux

@Anzeo - Sì, questo è il requisito dei clienti. Ha dato un png mostrando quel tipo di struttura in una tabella. – trex

@trex Non si dovrebbero usare tabelle per i layout (i modelli di e-mail vanno bene) Per un layout simile a una tabella, dare un'occhiata al bootstrap. Per il tuo problema: non andrai lontano con un solo tag

, non puoi inserire uno all'interno di uno

senza uno – AlexG

risposta

Questa è la vostra struttura si voleva, non impostare la larghezza di valore percentuale per evitare di struture di perdere la forma, mentre il ridimensionamento pagina

<table border="1" width="800" height="100"> 
     <tr> 
     <th colspan="7"></th> 
     <th></th> 
     </tr> 
     <tr> 
     <td colspan="7"></td> 
     <td></td> 
     </tr> 
     <tr> 
     <td rowspan="3"></td> 
     <td></td> 
     <td colspan="3"></td> 
     <td></td> 
     <td colspan="2"></td> 
     </tr> 
     <tr> 
     <td rowspan="2"></td> 
     <td rowspan="2"></td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td colspan="2"></td> 
     </tr> 
     <tr> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td colspan="2"></td> 
     </tr> 
    </table>

fonte

2015-04-21 09:38:51

- Soluzione perfetta! Grazie. Quindi era solo il gioco di 'rowspan' e' colspan'. Hai cose nuove da imparare. Molte grazie :) – trex

Siete i benvenuti :) –

allora dovete fare una tabella globale con una riga per ogni fila che hai E all'interno delle celle di quelle file, crea un altro tavolo per modellarlo come vuoi.

Si dice che più bordi non dovrebbero apparire, quindi creare una classe per mostrare solo i bordi delle tabelle all'interno di ogni cella e non sugli altri, in questo modo si avranno solo i bordi desiderati.

Ricordare che la tabella globale deve contenere tutte le altre tabelle. Una tabella contiene tutto.

Nel codice corrente ci sono più tabelle separate per rendere la struttura delle righe così forzata da non renderizzare correttamente.

fonte

2015-04-21 09:08:34 Joze

L'ho provato ma non ho potuto formattarlo secondo le mie esigenze. – trex

@trex qual è esattamente il requisito? L'ho già fatto prima (non senza problemi) ma è sicuramente possibile. Specialmente nel caso di newsletter. – Joze

Solo un tavolo con quella struttura. Questo ha alcuni campi di input nell'ultima colonna che devono essere salvati nel database. – trex

Perché vorrebbe un tavolo simile? Lancia una roccia contro di lui.

In ogni caso, non utilizzare border: xx xxx xxx cercare di utilizzare sempre il bordo inferiore, bordo-destra, in modo da ridurre al minimo la quantità di linee lì.

Aggiungi intermitente colore di sfondo e effetti di passaggio del mouse, forse lo renderà più accettabile.

Altra, non lo so. pregare.

fonte

2015-04-21 09:20:04

Grazie per il suggerimento. Cercherò di aggiornarlo. – trex

Ebbene, il risultato esatto non può essere fatto con un solo tavolo. Hai celle che appaiono a metà dell'altezza o della larghezza di un'altra cella. Questo è ciò che non funzionerà.

Così mi hai fatto questa struttura, che si avvicini come si arriva:

<table> 
    <colgroup> 
     <col width="3%" span="2" /> 
     <col width="10%" /> 
     <col width="3%" /> 
     <col width="18%" /> 
     <col width="*" span="2" /> 
    </colgroup> 
    <tr> 
     <td colspan="6">x</td> 
     <td>x</td> 
    </tr> 
    <tr> 
     <td colspan="6">x</td> 
     <td>x</td> 
    </tr> 
    <tr> 
     <td rowspan="3">x</td> 
     <td>x</td> 
     <td colspan="3">x</td> 
     <td>x</td> 
     <td>x</td> 
    </tr> 
    <tr> 

     <td rowspan="2">x</td> 
     <td>x</td> 
     <td>x</td> 
     <td>x</td> 
     <td>x</td> 
     <td>x</td> 
    </tr> 
    <tr> 
     <td>x</td> 
     <td>x</td> 
     <td>x</td> 
     <td>x</td> 
     <td>x</td> 
    </tr> 
</table>

Updated Fiddle

fonte

2015-04-21 10:09:05 LinkinTED

Anche la soluzione è buona. Proprio come una curiosità, cosa fa 'span =" 2 "' fare in questo caso? – trex

Con 'colgroup' e' col', è possibile definire gli stili nelle colonne. Quindi '

' significa che le colonne dovrebbero avere una larghezza del 3% e dovrebbero estendersi su due colonne, in questo caso le prime due colonne. – LinkinTED

@ LinkinTED- Ok, ho capito! Grazie – trex

Problemi correlati