I know this question has been asked many times but I can't figure out the problem anyway, so this is my html:
<table class="UMLTable">
<tr>
<th>Table<th>
</tr>
<tr>
<td>Attribute 1<td>
</tr>
<tr>
<td>Attribute 1<td>
</tr>
<tr>
<td>Attribute 1<td>
</tr>
</tr>
</table>
So why this line does not work:
.UMLTable td:nth-child(even){
background-color:blue;
}
You need to select the nth tr element rather than the child td element.
Your selector should be:
.UMLTable tr:nth-child(even) td {
background-color:blue;
}
The reason your CSS isn't working as expected is because the td elements aren't siblings.
.UMLTable tr:nth-child(even) td {
background-color: blue;
}
<table class="UMLTable">
<tr>
<th>Table
<th>
</tr>
<tr>
<td>Attribute 1
<td>
</tr>
<tr>
<td>Attribute 1
<td>
</tr>
<tr>
<td>Attribute 1
<td>
</tr>
</tr>
</table>
Try to use the tr element instead of td like this:
.UMLTable tr:nth-child(even) td {
background-color:blue;
}
JSFIDDLE DEMO
Related
I have this table inside another table, i want to remove the border from the cells of child table(around A and B).
Below is the source code for this.
<style>
.withBorders tr td{
border: 1px solid black !important ;
}
.withBorders table.withoutBorders tr td {
border:0px
}
</style>
<table class="withBorders">
<tr>
<td>
<table class="withoutBorders">
<tbody>
<tr>
<td>A</td>
<td>B</td>
</tr>
</tbody>
</table>
</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
</tr>
</table>
The problem is this isn't working, i have tried many changes with child table's css selector but i am unable to override parent table css property.
Could someone please advice on this?
Note: I can not make any changes to the parent table css selector.
.withBorders tr td{
border: 1px solid black;
}
.withBorders tr td table tr td {
border:none;
}
<table class="withBorders">
<tr>
<td>
<table class="withoutBorders">
<tbody>
<tr>
<td>A</td>
<td>B</td>
</tr>
</tbody>
</table>
</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
</tr>
</table>
repeat what you typed, don't change your typing like this
.withBorders table.withoutBorders tr td {
border:0px
}
avaoid !important in your css. it's not good.
You can easily use the code like this:
.withBorders tr td{
border: 1px solid black;
}
.withBorders table.withoutBorders tr td {
border:0px
}
<table class="withBorders">
<tr>
<td>
<table class="withoutBorders">
<tbody>
<tr>
<td>A</td>
<td>B</td>
</tr>
</tbody>
</table>
</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
</tr>
</table>
"!important" means that if it is some choice between 2 styles, it will be choosen the style with higher priority. (the style which contains "!important")
I need to target the first <td> element in a table row that is visible--meaning it does not have inline styling of display:none.
Here's the gotchyas:
They are not always hidden
Sometimes more than one is hidden.
I can't edit the HTML or use javascript/jQuery--This needs to be a pure CSS solution (hopefully)
Here is a quick sample of what the code looks like:
<table>
<thead>
<tr>
<th style="display:none">Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
</tr>
</thead>
<tbody>
<tr>
<td style="display:none">Body1</td>
<td>Body2</td>
<td>Body3</td>
<td>Body4</td>
</tr>
</tbody>
</table>
I tried messing with something like this to no avail:
table > tbody > tr > td:first-of-type:not([style*="display:none"])
Here's a fiddle to mess with
Thanks in advance.
If your hidden elements are always at the beginning of the row, you can use the direct sibling selector for this +.
td:first-child,
td[style*="none"] + td {
color: red;
}
<table>
<thead>
<tr>
<th style="display:none">Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
</tr>
</thead>
<tbody>
<tr>
<td style="display:none">Body1</td>
<td>Body2</td>
<td>Body3</td>
<td>Body4</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td style="display:none">and</td>
<td>here's</td>
<td>an</td>
<td style="display:none">edge</td>
<td>case</td>
</tr>
</tbody>
</table>
This will style anything that isn't "display:none", but undo that when it gets to a subsequent "display:none".
table > tbody > tr > td:not([style*="display:none"]) {
color: red;
}
table > tbody > tr > td:not([style*="display:none"]) ~ td:not([style*="display:none"]) {
color: inherit;
}
<table>
<thead>
<tr>
<th style="display:none">Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
</tr>
</thead>
<tbody>
<tr>
<td style="display:none">Body1</td>
<td>Body2</td>
<td>Body3</td>
<td>Body4</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
</tbody>
</table>
I found how I can hide a table column in this thread:
<style>
table tr th:nth-child(4){ display:none; }
table tr td:nth-child(4){ display:none; }
</style>
However, this doesn't seem to work correctly when I use colspan and rowspan attributes. On this table the content of some cells is missing, as is the right border.
Notice that the content and right border are missing each time the row starts with a rowspan.
How can I hide table columns correctly when I use colspan and rowspan attributes?
Try using nth-child for tr also
I hope it will solve your problem.
<style>
table tr:nth-child(4) th:nth-child(1){ display:none; }
table tr:nth-child(4) td:nth-child(1){ display:none; }
</style>
Here is the code snippet.
table,th,td{border:1px solid black;}
table.new tr:nth-child(4) td{display:none;}
table.new tr:nth-child(2) td:nth-child(2){display:none;}
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td rowspan="2">$100</td>
</tr>
<tr>
<td>February</td>
</tr>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
<tr>
<td>Mar</td>
<td >$100</td>
</tr>
<tr>
</table>
<span>table after hiding row/column with rowspan/colspan </span>
<table class="new">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td rowspan="2">$100</td>
</tr>
<tr>
<td>February</td>
</tr>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
<tr>
<td>Mar</td>
<td >$100</td>
</tr>
<tr>
</table>
Did you try:
table tr th:nth-child(3), table tr td:nth-child(3){
display: none;
}
No rule knows "n". You need to put a number inside the nth-child() method.
So for your example link I used n = 3
See my simple example:
https://jsfiddle.net/cvaxzvey/
Is there a way, how to group selectors in CSS?
To be precise lets have table with some content like this.
<table id="my-table">
<thead>
<tr>
<th><div class="my-div1"></div></th>
<th><div class="my-div2"></div></th>
</tr>
</thead>
<tbody>
<tr>
<td><div class="my-div1"></div></td>
<td><div class="my-div2"></div></td>
</tr>
</tbody>
</table>
And I want to merge these style
#my-table tr > th .my-div1,
#my-table tr > td .my-div1 {
some styles
}
into something like this
#my-table tr > (th, td) .my-div1 {
some styles
}
Does CSS support anything like this?
CSS does not support it by default. Yet there are CSS preprocessors that I'm sure can help you with this.
Just skip over specifying th or td and jump right to the class.
<table id="my-table">
<thead>
<tr>
<th><div class="my-div1">A</div></th>
<th><div class="my-div2">B</div></th>
</tr>
</thead>
<tbody>
<tr>
<td><div class="my-div1">C</div></td>
<td><div class="my-div2">D</div></td>
</tr>
</tbody>
#my-table tr .my-div1 {
color: red;
}
http://jsfiddle.net/gdsbLhb2/
Im trying to insert an image to a Table :before class by calling the first child on the table. The table has a few different classes and a few duplicates. The class Im trying to work out is
td.familyHeader.foldedlabel.Apple:first-child
which has a few duplicates, and the first-class removes all of them. How can I call only the first one?
The html:
<tbody>
<tr>
<td colspan="10" class="familyHeader foldedlabel Apple"></td>
</tr>
<tr>
<td colspan="10" class="familyHeader foldedlabel Apple"></td>
</tr>
<tr>
<td colspan="10" class="familyHeader foldedlabel Apple"></td>
</tr>
<tr>
<td colspan="10" class="familyHeader foldedlabel"></td>
</tr>
<tr>
<td colspan="10" class="familyHeader foldedlabel"></td>
</tr>
<tr>
<td colspan="10" class="familyHeader foldedlabel"></td>
</tr>
</tbody>
you can use below example to create your own code. It will work.
<style>
table td.aaa {
background:#000;
color:#fff;
}
table td:first-child.aaa {
color:#ff0000
}
</style>
<table>
<tr>
<td class="aaa">1</td>
<td class="aaa">1</td>
<td class="aaa">1</td>
<td class="aaa">1</td>
<td class="aaa">1</td>
</tr>
</table>
If i understand your question correctly:
Because each td is the only child in each tr - it will always be the first child in your selector.
instead you need to select the first tr and then the td within that
The selector you need will be:
tbody tr:first-child td.Apple
I used the selector tbody tr:nth-child(1) td.Apple.
You can find an example here: jsbin.com.