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.
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 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/
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
How can I define some general properties for the columns of a table? For example, in the following table I have 2 columns. I want the left column to have a width of 30px and the right column a width of 70px. For the example below I'm writing a CSS class name in every row. Is there a way that I can do it in a more general way? Thanks.
<table width="100px" cellspacing="0">
<tbody>
<tr>
<td class="left">30px wide</td>
<td class="right">70px wide</td>
</tr>
<tr>
<td class="left">30px wide</td>
<td class="right">70px wide</td>
</tr>
<tr>
<td class="left">30px wide</td>
<td class="right">70px wide</td>
</tr>
<tr>
<td class="left">30px wide</td>
<td class="right">70px wide</td>
</tr>
</tbody>
</table>
it suffices to define the first TD's... it looks like:
<table width="100px" cellspacing="0">
<tbody>
<tr>
<td class="left">30px wide</td>
<td class="right">70px wide</td>
</tr>
<tr>
<td>30px wide</td>
<td>70px wide</td>
</tr>
<tr>
<td>30px wide</td>
<td>70px wide</td>
</tr>
<tr>
<td>30px wide</td>
<td>70px wide</td>
</tr>
</tbody>
</table>
And in following, Im writing css class name in every row. Is there a way that I can do it in more general way?
I assume you mean "... in every column". No, if you want cross-browser support, this is currently indeed the only way to do it.
In CSS 3, there is the :nth-child pseudo-class, but it is fully supported only by FF >= 3.5 and Chrome.
Just define classes for td in first row. See example.
Use <th> tags for the first row of the table and then you could have:
th.left {
width: 30px;
}
th.right {
width: 70px;
}
You can use <col> elements to define widths for a column at a time. Something like
<table>
<col class="left">
<col class="right">
<tr>
<td>30px wide</td>
<td>70px wide</td>
</tr>
<tr>
<td>30px wide</td>
<td>70px wide</td>
</tr>
</table>
Note, though, the styles you can set are quite limited -- so far, only width and background-color work for me (in Chrome 9). So if you have anything else set for the class (font sizes, text colors, alignment, etc), you might want to stick to keeping the class on each <td>.