CSS i tabele zagnieżdżone - html, css, zagnieżdżone, tabele css

Mam tabelę html zawierającą wiele innych tabel. Mój problem polega na tym, że wewnętrzne tabele dziedziczą te same reguły co zewnętrzny stół.

Czy istnieje sposób na przejechanie regułami zewnętrznego stołu? Zasadniczo chcę powiedzieć wewnętrzny stół:

Hej, wewnętrzny stolik Twoje imię to "X". Chcę, żebyś zapomniał o swoim zewnętrznym stole i jego zasadach. Chcę, żebyś przestrzegał tych innych konkretnych zasad.

Czy istnieje sposób, aby to się stało w HTML / CSS? Przykłady?

Odpowiedzi:

19 dla odpowiedzi nr 1

table.something > thead > tr > td,
table.something > tbody > tr > td,
table.something > tfoot > tr > td,
table.something > tr > td {
...
}

Dzięki temu tylko style potomne wybranej tabeli, a nie tabel zagnieżdżonych, będą odbierać style.

---

5 dla odpowiedzi nr 2

Zakładam, że masz następujące

HTML

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

CSS - bez klasy / ID

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

Czasami możesz uciec:

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

CSS - z klasą / identyfikatorem

Mała uwaga z klasami i identyfikatorami. Klasy są czymś, co można zastosować do tylu elementów, ile tylko zapragniesz, i mieć określoną stylistykę. Identyfikatory powinny być używane tylko dla jednego elementu, ponieważ jest to identyfikacja tego elementu. Oznacza to, że jeśli masz dwie tabele zagnieżdżone, musisz nadać tej drugiej tabeli nowy unikalny identyfikator.

Identyfikatory są wyświetlane jako # w CSS, więc jeśli chcesz go użyć tylko dla określonego identyfikatora, będzie to:

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

Używanie klasy (jak pokazuje przykład) w CSS jestokres. Jeśli użyjesz kropki bez określenia elementu, zostanie ona użyta dla wszystkich elementów, które mają klasę o tej samej nazwie, więc najlepiej jest określić, do którego elementu ma być dołączony.

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

---

0 dla odpowiedzi № 3

Najprostszym sposobem jest klasa i identyfikator. Pamiętaj, aby użyć tego elementu.

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

Możesz także użyć

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

lub połącz oba

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

Mam nadzieję że to pomoże.

---