web-dev-qa-db-fra.com

CSS et tables imbriquées

J'ai une table HTML qui contient plusieurs autres tables. Mon problème est que les tables internes héritent des mêmes règles que la table externe.

Y at-il un moyen de dépasser les règles de la table extérieure? Je veux essentiellement dire à la table intérieure: 

Hey table intérieure Votre nom est "X". Je veux que vous oubliez tout de votre table et de ses règles. Je veux que vous suiviez ces autres règles spécifiques.

Y at-il un moyen de rendre cela possible en HTML/CSS? Exemples?

htmlcssnestedcss-tables
18
codingJoe
table.something > thead > tr > td,
table.something > tbody > tr > td,
table.something > tfoot > tr > td,
table.something > tr > td {
   ...
}

Cela garantira que seuls les enfants directs de la table sélectionnée, et non des tables imbriquées, recevront les styles.

21
Niet the Dark Absol

Je suppose que vous avez ce qui suit

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 vous en tirer avec:

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

CSS - Avec classe/ID

Une petite note avec les classes et les identifiants. Les classes peuvent être appliquées à autant d'éléments que vous le souhaitez et porter le style spécifié. Les identifiants ne doivent être utilisés que pour un seul élément, car il s'agit d'une identification de cet élément. Cela signifie que si vous avez deux tables imbriquées, vous devez attribuer un nouvel ID unique à cette seconde table.

Les identifiants sont indiqués par # en CSS. Donc, si vous voulez simplement l'utiliser pour l'identifiant spécifique, ce sera: 

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

Utiliser la classe (comme le montre l'exemple) en CSS est un point. Si vous utilisez la période sans spécifier l'élément, elle sera utilisée pour tous les éléments ayant une classe du même nom. Il est donc préférable de spécifier l'élément auquel vous souhaitez l'attacher.

table.outer-table { /* Outer table Style */ }
table.inner-table { /* Inner table Style */ }
5
Dave

Le moyen le plus simple est la classe et l'identifiant. Assurez-vous d'utiliser l'élément. 

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

Vous pouvez aussi 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 */

J'espère que cela t'aides.

0
jimminySnippet