CSS et les tableaux Imbriqués

J'ai de tableau html qui contient plusieurs autres tables. Mon problème est que l'intérieur des tables de héritent des mêmes règles que la table externe.

Est-il un moyen de redéfinir les règles de la table externe? En gros, je veux dire à l'intérieur de la table:

Hey table interne de Votre nom est "X". Je veux vous faire oublier tout au sujet de votre table externe et de ses règles. Je veux que vous suivez ces autres règles spécifiques.

EST-il un moyen de le faire en HTML/CSS? Des exemples?

Votre meilleur pari serait d'apprendre à créer des mises en page avec les CSS et <div>'s au lieu de tables imbriquées. C'est la bonne façon les mises en page sont fait maintenant.
Je déteste le maintien de l'ancien code qui est plein de tables imbriquées ><;
table {/*rules*/} et table table {/*other overriding rules*/} c'est comment c'est fait?
Quelles sont les règles qui parlez-vous? Pouvez-vous montrer un peu de code?
même aujourd'hui (2,5 ans plus tard), certaines données sont encore tabulaire. Et ici et là, on a affaire à des données qui a plus de deux dimensions. Aussi, l'OP problème est ni meilleure ni pire lorsque le balisage est par exemple div.outer > div.row > div.cell > div.inner > div.row > div.cell au lieu de table.outer > tr > td > table.inner > tr > td.
par deux fois manqué le "mises en page" qualificatif dans mon commentaire. Cela signifie que je n'étais pas en train de parler d'une des OP de "tableau de données". Peu importe, si vous avez des données tabulaires, vous êtes probablement ne pas avoir à les imbriquer les tables.
non, je n'ai pas le rater, je me demandais comment vous est venu à la conclusion que l'OP a été de parler à propos de mises en page et les besoins d'apprendre comment utiliser le CSS avec des divs.
mon dernier commentaire doit avoir été clair: "peu importe, si vous avez des données tabulaires, vous êtes probablement ne pas avoir à les imbriquer les tables." En d'autres termes, si vous n'êtes pas de compilation de données, vous êtes en train de faire une mise en page.
C'est une question d'interprétation, je pense, la mienne est différente. Mais merci pour les précisions 🙂
lors de la totalisation des données, le contenu d'une cellule de tableau serait de données... pas une autre table. Pas vraiment sûr de savoir comment c'est ouvert pour les diverses interprétations, mais à chacun ses goûts.
Eh bien, qui suppose que les données contenues sont une valeur atomique, pourquoi ne devrait-elle pas contenir de plus en plus complexes, la structure de données? Imaginez une table contenant les développeurs par langue et par pays. Peut-être que vous voulez briser les devs plus bas par sexe et par âge. Ce serait un tableau dans un tableau, et il serait sémantiquement correct, à mon humble avis.

InformationsquelleAutor codingJoe | 2011-10-29

21
```
table.something > thead > tr > td,
table.something > tbody > tr > td,
table.something > tfoot > tr > td,
table.something > tr > td {
   ...
}
```
Cela permettra d'assurer que seuls les enfants directs de la table sélectionnée, et pas de tables imbriquées, recevra les styles.
- vraiment génial! na pas savoir la ">" sélecteur de avant de! merci!!!!
- merci beaucoup pour cette.
InformationsquelleAutor Niet the Dark Absol
5

Je vais supposer que vous avez l'suivantes

HTML
```
<table class="outer-table">
    <tr>
        <td>
            <table class="inner-table">
                <tr>
                    <td>
                        I'm some content!
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
```
CSS - Sans classe/ID
```
table { border: 1px solid black; }
table tr td table { border: 1px solid green; }
```
Parfois, vous pouvez obtenir loin avec:
```
table { border: 1px solid black; }
table table { border: 1px solid green; }
```
CSS - Avec la Classe/ID

Une petite note avec les Classes et les Id. Les Classes sont quelque chose qui peut être appliquée à de nombreux éléments que vous souhaitez et porter le style spécifié. Les id ne doit être utilisé que pour un seul élément, ce qui est une identification de cet élément. Cela signifie que si vous avez deux tables imbriquées, vous avez besoin pour donner le deuxième tableau une nouvelle ID unique.

ID est indiqué en # CSS. Donc, si vous souhaitez les utiliser pour l'ID spécifique, il sera:
```
#outer-table { /* Outer table Style */}
#inner-table { /* Inner table Style */}
```
À l'aide de la classe (comme le montre l'exemple) dans le CSS, c'est une période. Si vous utilisez de la période sans spécification de l'élément, il sera utilisé pour tous les éléments qui ont une classe du même nom, il est donc préférable de spécifier les éléments que vous voulez qu'il attache à l'.
```
table.outer-table { /* Outer table Style */ }
table.inner-table { /* Inner table Style */ }
```
- Quel est le problème avec affectation de classes et/ou de la carte d'identité pour les tables à la place?
- Il n'y a pas quelque chose de mal avec l'affectation de classes et/ou des Identifiants pour les éléments, il est recommandé! Bien que, j'ai travaillé sur quelques projets où nous n'étions pas en mesure de modifier le balisage en aucune façon. Juste modifier la feuille de style externe. J'étais juste en supposant que les choses 3h du matin >.<)
- Je commence à voir le modèle. Bien que j'ai l'intention d'utiliser les noms de classe au minimum. Ce n' table table { format stuff; } ressembler quand les noms de classe sont-elles appliquées?
- Ce serait tout simplement <table class="maclasse">...</table>. Ensuite, votre CSS serait de table.mycalss { /* style */ }. Je vais l'ajouter à la réponse de sorte que vous pouvez voir comment il est.
- les conseils est sage. j'ai fait ces exemples la nuit dernière; ils sont de la même table, une fois juste obtenu beaucoup plus de profondeur que les autres, vous pouvez voir exactement ce qui s y passe. jsfiddle.net/jalbertbowdenii/bMZfv jsfiddle.net/jalbertbowdenii/bMZfv/13 ils ne sont pas des tableaux imbriqués, c'est pourquoi c'est un commentaire et non une réponse, peu importe, vous pouvez facilement cibler exactement comme ça.
- J'ai rencontré un problème similaire à cela. J'ai trouvé que l'ordre d'entrée dans le CSS est important. J'ai eu mon intérieur de la table déclaré avant mon externe de la table. Par conséquent, lorsque j'ai analysé le rendu sous IE 9, j'ai vu le style de tableau était le dernier. Je l'HTML, j'ai déclaré l'extérieur que de l'intérieur. Dans le CSS, j'ai déclaré à l'intérieur qu'à l'extérieur. C'était l'ordre de déclaration dans le CSS qui a conduit à mon problème de rendu.
InformationsquelleAutor Dave

La façon la plus simple est class et id. Assurez-vous d'utiliser l'élément.

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

Vous pouvez également utiliser

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

ou combiner les deux

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

Espère que cette aide.

InformationsquelleAutor jimminySnippet

Vous devez vous connecter pour publier un commentaire.