Reputation: 91
I am coding css for tabs which there are two rows (there are many tabs) in table. I want to set background color to them,
This is HTML:
<table>
<!--profile-->
<tr><td colspan="3">profile</td></tr>
<!--tabs 2 rows-->
<div class="tab_links">
<!--row 1-->
<tr>
<td class="active"><a href="#tab1">tab1</a></td>
<td><a href="#tab2">tab2</a></td>
<td><a href="#tab3">tab3</a></td>
</tr>
<!--row 2-->
<tr>
<td><a href="#tab4">tab4</a></td>
<td><a href="#tab5">tab5</a></td>
<td><a href="#tab6">tab6</a></td>
</tr>
</div>
<!--detail of tab-->
<tr><td colspan="3">detail of tab</td></tr>
</table>
I try to code CSS, but it isn't work.
This is CSS:
.tab_links td {
background:#7fb5da;
}
Thank you
Upvotes: 0
Views: 29716
Reputation: 253506
There is one reason that your styling isn't applied, that's because the selector you supply .tab_links td
is never matched by the document. This is because, when constructing the DOM (the Document Object Model) the browser does not maintain invalid HTML, it tries to 'rescue' it. This is a feature, and not a bug. For example, the following (abbreviated and invalid) HTML:
<table>
<div class="tab_links">
<!--row 1-->
<tr>
<td class="active"><a href="#tab1">tab1</a></td>
<td><a href="#tab2">tab2</a></td>
<td><a href="#tab3">tab3</a></td>
</tr>
<!--row 2-->
<tr>
<td><a href="#tab4">tab4</a></td>
<td><a href="#tab5">tab5</a></td>
<td><a href="#tab6">tab6</a></td>
</tr>
</div>
</table>
Is, when constructing the DOM, converted (tested in Chrome 40.x/Windows 8.1) to:
<div class="tab_links">
<!--row 1-->
</div>
<table>
<tbody>
<tr>
<td class="active"><a href="#tab1">tab1</a>
</td>
<td><a href="#tab2">tab2</a>
</td>
<td><a href="#tab3">tab3</a>
</td>
</tr>
<!--row 2-->
<tr>
<td><a href="#tab4">tab4</a>
</td>
<td><a href="#tab5">tab5</a>
</td>
<td><a href="#tab6">tab6</a>
</td>
</tr>
</tbody>
</table>
Note that the <div>
element now precedes the <table>
? Also, the browser adds a (technically) optional <tbody>
element to wrap the <tr>
elements; but that's not terribly relevant.
So: the problem becomes the <div>
being in the wrong place; the only valid elements to be nested directly within a <table>
element are: <tbody>
, <thead>
, <tfoot>
and <tr>
1.
The solution I'd suggest, since you seem to want to group a number of <tr>
elements together, is to wrap those elements with a <tbody>
, and assign the relevant class-name to that element, which similarly, but more semantically, groups them together:
<table>
<tbody class="tab_links">
<tr>
<td class="active"><a href="#tab1">tab1</a>
</td>
<td><a href="#tab2">tab2</a>
</td>
<td><a href="#tab3">tab3</a>
</td>
</tr>
<!--row 2-->
<tr>
<td><a href="#tab4">tab4</a>
</td>
<td><a href="#tab5">tab5</a>
</td>
<td><a href="#tab6">tab6</a>
</td>
</tr>
</tbody>
</table>
.tab_links td {
color: #fff;
background-color: #66f;
}
a {
color: inherit;
}
<table>
<tbody class="tab_links">
<tr>
<td class="active"><a href="#tab1">tab1</a>
</td>
<td><a href="#tab2">tab2</a>
</td>
<td><a href="#tab3">tab3</a>
</td>
</tr>
<!--row 2-->
<tr>
<td><a href="#tab4">tab4</a>
</td>
<td><a href="#tab5">tab5</a>
</td>
<td><a href="#tab6">tab6</a>
</td>
</tr>
</tbody>
</table>
References:
<tbody>
around <tr>
elements if they're not already present.Upvotes: 6
Reputation: 5135
Add that class to the <tr>
and remove the div:
<table>
<!--profile-->
<tr><td colspan="3">profile</td></tr>
<!--tabs 2 rows-->
<!--row 1-->
<tr class="tab_links">
<td class="active"><a href="#tab1">tab1</a></td>
<td><a href="#tab2">tab2</a></td>
<td><a href="#tab3">tab3</a></td>
</tr>
<!--row 2-->
<tr class="tab_links">
<td><a href="#tab4">tab4</a></td>
<td><a href="#tab5">tab5</a></td>
<td><a href="#tab6">tab6</a></td>
</tr>
<!--detail of tab-->
<tr><td colspan="3">detail of tab</td></tr>
</table>
Demo: http://jsfiddle.net/trex005/2L7d86p2/
Upvotes: 0
Reputation: 156
Please remove the <div class="tab_links">
and add this class to table then it will work
Thanks
Upvotes: 0