I have been improving code that transforms XML to HTML. There is a recursive method that generates a table.
I want each level to have different color. So I set a style for three levels and I repeat them if the recursion is deeper (level % 3).
But it seems that parent table style gets priority as the fourth level has the same color as its parent. Can I work around this trouble?
http://jsbin.com/lexumogafe
<html>
<head><style>
table { border-collapse: collapse; }
table, th, td { border: 1px solid black; }
th, td { padding: 10px; }
table.level_1 td { border-color: green; }
table.level_2 td { border-color: blue; }
table.level_3 td { border-color: red; }
</style></head>
<body>
<table class='rule level_1'>
<tr class="all">
<td>XX</td>
<td>
<table class='rule level_2'>
<tr class="all">
<td>YY</td>
<td>
<table class='rule level_3'>
<tr class="all">
<td>ZZ</td>
<td>
<table class='rule level_1'>
<tr class="all">
<td>ZZ</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
You can make the styles specific to the actual tds using the direct child selector:
table.level_1 > tbody > tr > td { border-color: green; }
table.level_2 > tbody > tr > td { border-color: blue; }
table.level_3 > tbody > tr > td { border-color: red; }
Updated bin
use css parent child relation like
table > table > td
{
border-collapse: collapse;
}
this way css property will apply only to its child element not siblings.
Related
I want to add border to my specific table's td and th so i did like :
table.borderedtable td, th {
border: 1px solid black;
}
table.borderedtable {
border-collapse: collapse;
}
<table class='borderedtable'>
<tr>
<td>
<table>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
problem is the inside table also gets the border I want the border to be added only to td and th under the table with class. So i tried using direct child select > like below:
table.borderedtable>tr>td,>tr>th {
border: 1px solid black;
}
table.borderedtable {
border-collapse: collapse;
}
<table class='borderedtable'>
<tr>
<td>
<table>
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
Now I dont get any border
The browser automatically inserts a <tbody> element inside tables, so the tbody is the direct descendent of your table, not tr.
For instance, to select the first td inside a table you would do this:
table.borderedtable>tbody>tr>td {
border: 1px solid black;
}
table.borderedtable>tbody>tr>td, table.borderedtable>thead>tr>th {
border: 1px solid black;
}
table.borderedtable {
border-collapse: collapse;
}
I need a table just like describred in Fixed right column table scales to responsive design But when I define a background color using css the rule doesn't apply to the fixed column
Jsfiddle: https://jsfiddle.net/3ckvkr1f/2/
Thanks!
HTML
<div class="table-responsive">
<table class="table-striped" cellpadding="9">
<thead>
<tr>
<th>
col1
</th>
<th>
col2
</th>
<th class="crud-links"> Options</th>
</tr>
</thead>
<tr>
<td>
R1col1 alçkfjalçkfjalkjflaksjflaksj
</td>
<td>
R1col2 aslkfjasklçfjaklçfjasklfjasçklfjas
</td>
<td class="crud-links">
x
</td>
</tr>
<tr>
<td style="white-space: nowrap;">
R2col1 alçkfjalçkfjalkjflaksjflaksj slkfjsçklafjaslfkjsldk
</td>
<td style="white-space: nowrap;">
R2col2 aslkfjasklçfjaklçfjasklfjasçklfjas
</td>
<td class="crud-links">
x
</td>
</tr>
<tr>
<td style="white-space: nowrap;">
R3col1 alçkfjalçkfjalkjflaksjflaksj slkfjsçklafjaslfkjsldk
</td>
<td style="white-space: nowrap;">
R3col2 aslkfjasklçfjaklçfjasklfjasçklfjas
</td>
<td class="crud-links">
x
</td>
</tr>
</table>
</div>
CSS:
.table-striped > tbody > tr:nth-of-type(2n+1) {
background-color: blue;
}
.page-header {
padding-bottom: 9px;
margin: 40px 0 20px;
border-bottom: 1px solid #eeeeee;
}
.table-hover th, .table-hover td {
padding: 9px;
}
.table-responsive {
width: inherit;
max-width: 80%;
margin-bottom: 15px;
overflow-x: scroll;
overflow-y: hidden;
border: 0;
}
.crud-links{
position: absolute;
overflow:hidden;
width: 91px;
right: 0;
}
.table-striped > tbody > tr:nth-of-type(2n+1) {
background-color: blue;
}
Are you talking about the ones with the class .crud-links?
If so, just do
tr .crud-links { background: something; }
If you're talking about them not getting the same color as every other in the main part, just do the same, but using tr .crud-links:nth-of-type(odd)
Your css code refers to tbody tag, but You are missing it.
.table-striped > tbody > tr:nth-of-type(2n+1)
Correct yout html code, or change css like this:
.table-striped tr:nth-of-type(2n+1)
/*first three column class name as follow, */
/*tbody used for only tr td work otherwise table header also work with bgcolor*/
/*fixed column first three column hover color change*/
tbody > tr:hover > .freez,
tbody >tr:hover > .freez2,
tbody> tr:hover > .freez3{
background-color:#f5f5f5 !important;
}
I have this table CSS:
table.show-my-request-table {
border: 1px solid black;
margin-left:auto;
margin-right:auto;
border-collapse: collapse;
}
tr.show-my-request-table-header{
border: 1px solid black;
}
tr.show-my-request-table{
border: 1px solid black;
}
tr.show-my-request-table:hover{
background-color: #D3D3D3;
}
And table HTML:
<table class="show-my-request-table center">
<tr class="show-my-request-table-header">
<th>Date</th>
<th>Priority</th>
<th>Question</th>
</tr>
<tr >
<td class="show-my-request-table"> 11.8.2016 15:27:13
</td>
<td>
<img src="/resources/img/priority-flag/priority-LOW-icon.png" class="priority-icon">
</td>
<td>
</td>
</tr>
<tr >
<td class="show-my-request-table">
11.8.2016 14:45:41
</td>
<td>
<img src="/resources/img/priority-flag/priority-LOW-icon.png" class="priority-icon">
</td>
<td>
Jak se máš?
</td>
</tr>
</table>
I want set up a red background for the first td tag.
My problem is, that I don't know how to do it for only one table.
When I try:
td:first-child {
background-color: #ff0000;
}
it works for all tables.
I think that this code is good, but not working:
table.show-my-request-table > td:first-child {
background-color: #ff0000;
}
Why? How can I do this?
Try this:
table.show-my-request-table tr > td:first-child {
background-color: #ff0000;
}
You don't need to use > (immediate children selector) just put a space
Try this:
table.show-my-request-table td:first-child {
background-color: #ff0000;
}
table.show-my-request-table > td:first-child {
background-color: #ff0000;
}
This selector tries to target a td that is a direct child of the table element. As your own code shows:
<table class="show-my-request-table center">
<!-- snip -->
<tr >
<td class="show-my-request-table">
There is (and has to be) a tr element between them. But that's not all: the HTML parser will also silently insert a tbody element as a parent for the tr (unless you have explicitly included a <thead> or <tbody> tag). The <tbody> tag is optional in HTML, but the element is not, so the parser will simply add the element if the tag is missing.
The solution is to use the descendant selector:
table.show-my-request-table td:first-child {
background-color: #ff0000;
}
A keen observer will notice that the > combinator has been replaced by a (space) combinator.
You just need to target the element inside the table
Try this
table.show-my-request-table tr td:first-child {
background-color: #ff0000;
}
Here's a code pen http://codepen.io/anon/pen/LkrmqK
Cheers and happy coding.
table.show-my-request-table > td:nth-child(1) {
background: #25a3c2;
}
/* grab 2nd row, then color the first cell */
tr:nth-child(2) td:first-child {
background-color: #ff0000;
}
See it in action below
table.show-my-request-table {
border: 1px solid black;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
}
tr.show-my-request-table-header {
border: 1px solid black;
}
tr.show-my-request-table {
border: 1px solid black;
}
tr.show-my-request-table:hover {
background-color: #D3D3D3;
}
/* grab 2nd row, then color the first cell */
tr:nth-child(2) td:first-child {
background-color: #ff0000;
}
<table class="show-my-request-table center">
<tr class="show-my-request-table-header">
<th>Date</th>
<th>Priority</th>
<th>Question</th>
</tr>
<tr>
<td class="show-my-request-table">
11.8.2016 15:27:13
</td>
<td>
<img src="/resources/img/priority-flag/priority-LOW-icon.png" class="priority-icon">
</td>
<td>
</td>
</tr>
<tr>
<td class="show-my-request-table">
11.8.2016 14:45:41
</td>
<td>
<img src="/resources/img/priority-flag/priority-LOW-icon.png" class="priority-icon">
</td>
<td>
Jak se máš?
</td>
</tr>
Here's the fiddle:
https://jsfiddle.net/80mek2sL/1/
I want to select all but the first tr and apply:
border-top: 1px grey solid;
Then I want to select all first td's but not the first td of the first tr (= ignore first tr) and apply
border-right: 1px grey dotted;
(I totally dont care about compatibility with prehistorical Web browsers, I just want it to work on nowadays Web browsers)
What I dont get (that's why I'm lost actually) is that immediate selector table > tr doesn't select tr (otherwise I would have solved my problem)
Your selector is working. The problem is that tr's don't have a border. You need to apply it the td within...
#cheatsheet tr:not(:first-child) td {
border-top:1px grey solid;
background-color: #EF0;
}
Updated Fiddle
#cheatsheet td {
margin:2px;
padding:2px
}
#cheatsheet tr td:first-child {
padding-left:10%;
width:30%;
}
#cheatsheet thead {
background-color: #EFE;
}
#cheatsheet h3 {
text-align: center;
}
table#cheatsheet {
border:1px black solid;
margin:2px; padding:2px;
border-right:1px grey solid;
width:100%;
}
#cheatsheet tr:not(:first-child) td {
border-top:1px grey solid;
background-color: #EF0;
}
<h1>Vim</h1>
<table id="cheatsheet">
<thead><tr>
<td colspan="2"><h3>aa</h3></td>
</tr></thead>
<tr>
<td><code class="prettyprint lang-sh">:split</code></td>
<td style="width:auto">bb</td>
</tr>
<tr>
<td><code class="prettyprint lang-sh">:vsplit</code></td>
<td style="width:auto">split vertical</td>
</tr>
</table>
On another note, the reason table > tr doesn't work is because tr's are not an immediate descendant of table in the rendered HTML. If you use your browsers element inspector you will see that thead and tbody elements are automatically inserted for you
EDIT
After the comment below all you need to do is this...
#cheatsheet tbody td {
border-top:1px grey solid;
background-color: #EF0;
}
ie. target the td within tbody only,
Updated Fiddle
check fiddle :https://jsfiddle.net/80mek2sL/6/
nth-child(n+2) selector helps to select any number of child. in following example I am selecting row from ahead of second child.
#cheatsheet tr:nth-child(n+2) td {
border-top:1px grey solid;
background-color: #EF0;
}
You can also play aorund (n + *) and check the result to better understand the nth-child selector
note: you can not put border property to <tr> so you will need to
assign it to <td>
HTML
<table id="cheatsheet">
<thead>
<tr>
<td colspan="2">
<h3>aa</h3>
</td>
</tr>
</thead>
<tr>
<td><code class="prettyprint lang-sh">:split</code>
</td>
<td style="width:auto">bb</td>
</tr>
<tr>
<td><code class="prettyprint lang-sh">:vsplit</code>
</td>
<td style="width:auto">split vertical</td>
</tr>
<tr>
<td><code class="prettyprint lang-sh">:vsplit</code>
</td>
<td style="width:auto">split vertical</td>
</tr>
<tr>
<td><code class="prettyprint lang-sh">:vsplit</code>
</td>
<td style="width:auto">split vertical</td>
</tr>
</table>
CSS
#cheatsheet td {
margin:2px;
padding:2px
}
#cheatsheet tr td:first-child {
padding-left:10%;
width:30%;
}
#cheatsheet thead {
background-color: #EFE;
}
#cheatsheet h3 {
text-align: center;
}
table#cheatsheet {
border:1px black solid;
margin:2px;
padding:2px;
border-right:1px grey solid;
width:100%;
}
#cheatsheet tr:nth-child(n+2) td {
border-top:1px grey solid;
background-color: #EF0;
}
I have a following code:
<html>
<head>
<style>
table {
border: solid red 2px;
}
tr {
border: solid red 2px;
}
td {
border: inherit;
}
</style>
</head>
<body>
<table>
<tr>
<td> 1 </td> <td> 2 </td>
</tr>
<tr>
<td> 1 </td> <td> 2 </td>
</tr>
</table>
</body>
</html>
It works correctly. A property border of "tr" inherit by child "td".
But this code work differently, in spite of fact, that logical of work is the same:
<html>
<head>
<style>
table {
border: solid red 2px;
}
tr {
border: inherit;
}
td {
border: inherit;
}
</style>
</head>
<body>
<table>
<tr>
<td> 1 </td> <td> 2 </td>
</tr>
<tr>
<td> 1 </td> <td> 2 </td>
</tr>
</table>
</body>
</html>
There is property border of "tr" don't inherit by child "td". Why?
In the final html that is rendered, tr is not child of table but tbody.
Hierarchy is: table -> tbody -> tr
Default border of tbody is not inherit but `medium , therefore, tr doesn't inherit.
Try this:
tbody, tr {
border: inherit;
}