I have html table that contains multiple other tables. My problem is that the inner tables inherit the same rules as the outer table.
Is there a way to over ride the rules of the outer table? I basically want to tell the inner table:
Hey inner table Your name is "X". I want you to forget all about your outer table and its rules. I want you to follow these other specific rules.
IS there a way to make that happen in HTML/CSS? Examples?
The nested table in HTML means creating a table on a webpage inside another table on the same web page.
A table can be created within another table by simply using the table tags like <table>, <tr>, <td>, etc., to create our nested table. Since nesting tables can lead to higher complexity levels, remember to begin and end the nesting tables within the same cell.
If you need to run efficient queries on a collection, handle arbitrary numbers of elements, or perform mass insert, update, or delete operations, then use a nested table. See "Design Considerations for Collections".
noun. one of a set of usually three or four small tables that are graduated in size so that they may be stacked on top of one another.
table.something > thead > tr > td,
table.something > tbody > tr > td,
table.something > tfoot > tr > td,
table.something > tr > td {
...
}
This will ensure that only direct children of the selected table, and not of nested tables, will receive the styles.
I'll assume you have the following
HTML
<table class="outer-table">
<tr>
<td>
<table class="inner-table">
<tr>
<td>
I'm some content!
</td>
</tr>
</table>
</td>
</tr>
</table>
CSS - Without class/ID
table { border: 1px solid black; }
table tr td table { border: 1px solid green; }
Sometimes you can get away with:
table { border: 1px solid black; }
table table { border: 1px solid green; }
CSS - With Class/ID
A little note with Classes and IDs. Classes are something that can be applied to as many elements as you desire and carry the styling specified. IDs should only be used for one element, as this is an identification to that element. That means if you have two nested tables, you need to give that second table a new unique ID.
ID's are shown as # in CSS. So if you just want to use it for the specific ID, it will be:
#outer-table { /* Outer table Style */ }
#inner-table { /* Inner table Style */ }
Using the class (as the example shows) in CSS, is a period. If you use the period without specifying the element, it will be used for all elements that have a class of the same name, so it's best to specify what element you want it attached to.
table.outer-table { /* Outer table Style */ }
table.inner-table { /* Inner table Style */ }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With