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/
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/
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
Hi I've a table like below and I wanted to apply style for only tr which is belongs to section.
<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
When I try like below it is applying for all trs including trs.
<style type="text/css">
tr
{
height:30px
}
</style>
How can I restrict this style to apply only for header part.
use,
th
{
height:30px
}
Or else you can use class
You can add a class to that tr and specify that class in the css, like this:
<table>
<thead>
<tr class="give-style">
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
And in the css:
<style type="text/css">
.give-style
{
height:30px
}
</style>
That should do the trick, please choose this as the correct answer if it solves your doubt by clicking on the tick symbol to the left.
use it like this
<tr class="my_class">
</tr>
then in your CSS, refer it using a "." infront of your classname('my_class')
.myclass{
//your styles go here
}
Try this:
<style type="text/css">
tr
{
height:30px
}
thead > tr:first-child
{
//put anything you want here
}
</style>