CSS e tabelle Nidificate

Ho una tabella html che contiene più di altre tabelle. Il mio problema è che le tabelle interne ereditano le stesse regole della tabella esterna.

C’è un modo per over ride le regole della tabella esterna? Io, fondamentalmente, desidera raccontare la tabella interna:

Ehi tabella interna il Tuo nome è “X”. Voglio dimenticare tutto il tuo tavolo esterno e le sue regole. Voglio che tu segua queste altre norme specifiche.

C’È un modo per fare che questo accada in HTML/CSS? Esempi?

  • La vostra scommessa migliore sarebbe quello di imparare a creare layout di pagina con i CSS e <div>‘s invece di tabelle nidificate. E ‘ il modo corretto layout sono fatto ora.
  • Io odio il mantenimento di un vecchio codice, che è pieno di tabelle nidificate ><
  • table {/*rules*/} e table table {/*other overriding rules*/} che come è fatto?
  • Quali regole parli? Puoi mostrare un po ‘ di codice?
  • anche oggi (2,5 anni più tardi), alcuni dati sono ancora tabulare. E poi uno ha a che fare con i dati che ha più di due dimensioni. Inoltre, l’OP problema diventa né meglio né peggio quando il markup è, per esempio, div.outer > div.row > div.cell > div.inner > div.row > div.cell invece di table.outer > tr > td > table.inner > tr > td.
  • due volte perdere il “layout” qualifier nel mio commento. Il che significa che non stavo parlando di una qualsiasi delle OP del “tabellare” i dati. A prescindere, se si dispone di dati in formato tabellare, probabilmente non dover nido tabelle.
  • no non mi manca, ho solo chiesto come si giunse alla conclusione che l’OP parlava di layout e ha bisogno di imparare ad usare i CSS con i div.
  • il mio ultimo commento dovrebbe essere stato chiaro: “a Prescindere, se si dispone di dati in formato tabellare, probabilmente non dover nido tavoli.” In altre parole, se non siete di tabulazione di dati, stai facendo un layout.
  • Questa è una questione di interpretazione, credo, la mia è diversa. Ma grazie per il chiarimento 🙂
  • quando la tabulazione dei dati, il contenuto di una cella di tabella sarebbe di dati… non di un’altra tabella. Non proprio sicuro di come che aperto a varie interpretazioni, ma a ciascuno il suo.
  • Beh, che presuppone che i dati in essi contenuti è un valore atomico, perché non dovrebbe contenere una più complessa struttura di dati? Immaginate una tabella che contiene gli sviluppatori di ogni lingua e di ogni paese. Forse si vuole rompere gli sviluppatori più in basso per genere ed età. Che potrebbe essere una tabella all’interno di una tabella, e sarebbe semanticamente corretto, IMHO.

InformationsquelleAutor codingJoe | 2011-10-29



3 Replies
  1. 21
    table.something > thead > tr > td,
    table.something > tbody > tr > td,
    table.something > tfoot > tr > td,
    table.something > tr > td {
       ...
    }

    Questo garantisce che solo i figli diretti della tabella selezionata, e non di tabelle nidificate, riceverà gli stili.

    • veramente grandi! non sapevo il “>” selettore di prima! grazie!
    • grazie tanto per questo.
  2. 5

    Io supponga di avere la seguente

    HTML

    <table class="outer-table">
        <tr>
            <td>
                <table class="inner-table">
                    <tr>
                        <td>
                            I'm some content!
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

    CSS – Senza classe/ID

    table { border: 1px solid black; }
    table tr td table { border: 1px solid green; }

    A volte si può ottenere via con:

    table { border: 1px solid black; }
    table table { border: 1px solid green; }

    CSS – Classe/ID

    Una piccola nota con le Classi e gli Id. Le classi sono qualcosa che può essere applicato a molti elementi, come il desiderio e portare lo stile specificato. Id deve essere utilizzato solo per un elemento, in quanto questa è una identificazione di tale elemento. Questo significa che se si dispone di due tabelle nidificate, è necessario dare che secondo la tabella di un nuovo ID univoco.

    ID vengono visualizzati come # CSS. Quindi, se si desidera utilizzare per l’ID specifico, sarà:

    #outer-table { /* Outer table Style */}
    #inner-table { /* Inner table Style */}

    Utilizzando la classe (come mostra l’esempio) in CSS, è un periodo. Se si utilizza il periodo senza specificare l’elemento, questo verrà utilizzato per tutti gli elementi che hanno una classe con lo stesso nome, quindi è meglio specificare cosa elemento che si desidera collegato.

    table.outer-table { /* Outer table Style */ }
    table.inner-table { /* Inner table Style */ }
    • Cosa c’è di sbagliato con l’assegnazione di classi e/o il documento di identità per i tavoli, invece?
    • Non c’è niente di sbagliato con l’assegnazione di classi e/o gli Id degli elementi, è raccomandato! Anche se, ho lavorato su un paio di progetti che, dove non siamo stati in grado di modificare il markup in alcun modo. Basta modificare il foglio di stile esterno. Stavo solo ipotizzando cose (3am >.<)
    • Sto iniziando a vedere il modello. Anche se ho intenzione di usare nomi di classe al minimo. Cosa table table { format stuff; } simile a quando i nomi delle classi sono applicate?
    • Che sarebbe semplicemente <table class=”miaclasse”>…</table>. Quindi il tuo CSS sarebbe tabella.mycalss { /* stile */ }. Vorrei aggiungere questo per la risposta, così si può vedere come è.
    • consiglio saggio. ho fatto questi esempi la notte scorsa; sono la stessa tabella, una volta appena arrivata molto più in profondità rispetto agli altri, è possibile vedere esattamente cosa sta succedendo. jsfiddle.net/jalbertbowdenii/bMZfv jsfiddle.net/jalbertbowdenii/bMZfv/13 non sono tabelle nidificate, ecco perché questo è un commento e non una risposta; indipendentemente da ciò, si può facilmente bersaglio, esattamente come questo.
    • Mi sono imbattuto in un problema simile a questo. Ho trovato che l’ordine di iscrizione nel CSS è importante. Ho avuto il mio interiore-tabella dichiarato prima della mia esterno-tavolo. Perciò, quando ho analizzato il rendering di internet explorer 9 che ho visto il stile di tabella è stata l’ultima aggiunta. Io l’HTML e ho dichiarato l’esterno che l’interno. Nel CSS ho dichiarato l’interno che l’esterno. È stata la dichiarazione in ordine il CSS che ha portato al mio problema di rendering.

  3. 0

    Il modo più semplice è di classe e id. Assicurarsi di utilizzare l’elemento.

    table.outter { some: style; } /* class */  
    table#inner { some: style; } /* id */ 

    È inoltre possibile utilizzare

    table { some: style; }  
    table table { some: style; } /* override outter table */  

    o combinare le due

    table.outter { some: style; } /* class */  
    table.outter table#inner { some: style; } /* id */ 

    Spero che questo aiuta.

Lascia un commento