I am looking für a css-way to set td-attributes in tables with an special id.
I tried this:
table.myid > tr > td
{....}
but it seems that this 2 level parent-relation is not working.
any ideas??
I wont set class-ids in every td!
You are using a class and not and ID.
I guess you dont have tables into tables, so try a simplest relantioship between the elements like
table#myid td {....}
It could free you from problems occuring because of "tbody" elements and so on.
Try:
table#myid > tr > td { ... }
#myid td { your css }
Should do the trick
#myid td {....}
or
.myclass td {....}
Is probally your best bet, not overly qualified and works in all browsers
you selector table.myid > tr > td {....} would not work when your tr is inside a tbody, thead or tfoot
Related
I'm not well versed in CSS, but I understand the basic idea of specificity (or so I think). Recently I was trying to override the table CSS of Bootstrap 3, which was defined for each cell like so (this is a partial bit, the part that was effective on the inspected element):
.table > tbody > tr.danger > td, .table > tfoot > tr.danger > td {
background-color: #ddd;
}
I was trying to override the background color of the entire row that contained that cell, with this:
table#results > tbody > tr.highlighted {
background-color: #ffd15b;
}
Which, as I understand it, has higher specificity due to the ID. However it wasn't working at all, until I introduced the child td in my CSS:
table#results > tbody > tr.highlighted > td {
background-color: #ffd15b;
}
Why didn't my first attempt work? I tried in both Safari and Chrome (latest versions)
Your problem is not CSS specificity, but merely the background of the cell ( <td> ) hiding the background of the row (<tr>) behind it.
Try adding border-collapse property to the parent table like below
table#results { border-collapse: collapse;}
I have a table, in tr I have 7 th in it. I want to set display: none for the third child of tr and just for that one!
How can I set this style?
Use :nth-child selector with constant expression as a param to hide both td and th in the third column:
td:nth-child(3), th:nth-child(3) {
display: none;
}
Demo.
If you are using JQuery, you can do something like this:
$('tr').find('td:eq(3)').hide();
Or, with css you can do:
tr > td:nth-child(3) {display: none;}
Use the nth-of-type CSS selector to just stylize just the third tr element of a table element td of ID #table, like so:
#table > tr:nth-of-type(3) {
display: none
}
<tr style="display:none;">
I am trying to change the background-color of rows that contain my found class in a striped bootstrap table. It works for even rows because bootstrap doesn't have a background color for them, but odd rows I am blocked by bootstraps CSS.
Bootstrap CSS:
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9;
}
Custom CSS:
tr.found{
background-color:#CECBCB;
}
How would I override bootstrap's CSS for only a single row at a time (as you can see in demo, odd rows are not overridden)?
BOOTPLY DEMO
Write specific selector to override the bootstrap ones
table.table.table-striped tr.found td {
background-color:#CECBCB;
}
Demo
Also, not only specificity matters here, make sure you apply the background to the td element and not the tr because bootstrap is applying to the td element so even if you apply the background to tr won't make sense.
As you said that you wanted the explanation for the selector I wrote, so here it goes, let us break that and understand..
Starting off with this
table.table.table-striped - Over here am selecting a table element having classes .table AS WELL AS .table-striped
Going further with the selector, tr.found we select the tr elements having a class called .found and lastly, we select the nested td elements.
.table-striped>tbody>tr:nth-child(odd)>td,
tr.found{
background-color:#CECBCB;
}
In addition to Mr. Alien's solution, I found that the following works in Bootstrap 4 without explicitly overriding the table style.
tr.found td{
background-color:#CECBCB;
}
Bootply Demo
I have a table structure, where I can't access jsp file to add class files. I have to manage it through CSS. In this case, I need to apply background color for first table all th's. Not to nested table th's. How can we do this with CSS? Example : http://jsfiddle.net/qdDnJ/
As per i understand may you can write like this:
tr th{
background:red;
}
tr table th{
background:none;
}
Check this http://jsfiddle.net/qdDnJ/2/
Distinguish first table's th from the second table's th.
Edited after comment:
See here, http://jsfiddle.net/qdDnJ/25/
I have assumed that div is parent container of first table.
You can replace it with table's parent.
e.g. If body is parent, css should be,
body > table > tbody > tr > th {
background-color:red;
}
You could do this:
table th:first-child {
background: red;
}
table table th:first-child {
background: none;
}
I would just give the outer table a class and use this:
table.class-name th:first-child {
background: red;
}
Every body tried many things to achieve the target as per the question.
but as per the HTML we can just write the following css and avoid child th to get background-color..
in this solution we do not need any id and class or any thing accept the .gap class. Even if this class is not there we can apply the css.
check the demo
HERE is the CSS with .gap class
table th {background-color:red;}
table td.gap tr th {background:none;}
HERE is the CSS without .gap class
table th {background-color:red;}
table td tr th {background:none;}
The simplest way I know is to use the child selector
#yourtableId > tbody > tr > th { background: red; }
Demo
How can you select the first and the last TD in a row?
tr > td[0],
tr > td[-1] {
/* styles */
}
You could use the :first-child and :last-child pseudo-selectors:
tr td:first-child,
tr td:last-child {
/* styles */
}
This should work in all major browsers, but IE7 has some problems when elements are added dynamically (and it won't work in IE6).
You can use the following snippet:
tr td:first-child {text-decoration: underline;}
tr td:last-child {color: red;}
Using the following pseudo classes:
:first-child means "select this element if it is the first child of its parent".
:last-child means "select this element if it is the last child of its parent".
Only element nodes (HTML tags) are affected, these pseudo-classes ignore text nodes.
You could use the :first-child and :last-child pseudo-selectors:
tr td:first-child{
color:red;
}
tr td:last-child {
color:green
}
Or you can use other way like
// To first child
tr td:nth-child(1){
color:red;
}
// To last child
tr td:nth-last-child(1){
color:green;
}
Both way are perfectly working
If you use sass(scss) you can use the following snippet:
tr > td{
/* styles for all td*/
&:first-child{
/* styles for first */
}
&:last-child{
/* styles for last*/
}
}
If the row contains some leading (or trailing) th tags before the td you should use the :first-of-type and the :last-of-type selectors. Otherwise the first td won't be selected if it's not the first element of the row.
This gives:
td:first-of-type, td:last-of-type {
/* styles */
}
You can use
table tr td:first-child { css here
}
for First Child and
table tr td:last-child { css here
}
for last Child.