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/
Related
I have a table with some <td>s, and a couple of them have rowspan attribute. I'm trying to select the very last one in the table, neither last-child nor last-of-type works.
Here is a jsfiddle: https://jsfiddle.net/p2cjwvj5/
<table class='myTable' border='1'>
<tr>
<td rowspan='3'>HEADER</td>
</tr>
<tr>
<td>something</td>
</tr>
<tr>
<td>something</td>
</tr>
<tr>
<td rowspan='3'>HEADER2</td>
</tr>
<tr>
<td>something2</td>
</tr>
<tr>
<td>something2</td>
</tr>
</table>
.myTable [rowspan]:last-of-type {
color: red;
}
I'm trying to to select the cell that contains "HEADER2".
Is this possible? I know I can work around it by tagging the last rowspan with another class, just wonder if there is a cleaner method. Thanks!
You can wrap each group of <tr>s into a <tbody>, then select the last tbody by either using :last-of-type or :last-child would be fine.
.myTable tbody:last-of-type td[rowspan] {
color: red;
}
<table class='myTable' border='1'>
<tbody>
<tr>
<td rowspan='3'>HEADER</td>
</tr>
<tr>
<td>something</td>
</tr>
<tr>
<td>something</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan='3'>HEADER2</td>
</tr>
<tr>
<td>something2</td>
</tr>
<tr>
<td>something2</td>
</tr>
</tbody>
</table>
If you don't want to add more <tbody>s, you could always just put a class on the last rowspan-ed table cell, like:
.myTable .lastRowspannedCell {
color: red;
}
<table class='myTable' border='1'>
<tr>
<td rowspan='3'>HEADER</td>
</tr>
<tr>
<td>something</td>
</tr>
<tr>
<td>something</td>
</tr>
<tr>
<td rowspan='3' class='lastRowspannedCell'>HEADER2</td>
</tr>
<tr>
<td>something2</td>
</tr>
<tr>
<td>something2</td>
</tr>
</table>
I don't know the structure of your back-end code, so that's assuming you can know up-front if a group is the last group.
As a bonus, not using the :last-of-type/:last-child selector nets you better IE8 compatibility, if you care about that.
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 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
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.