I already have the following CSS in my stylesheet which adds a counter to each row for all tables in the app:
tbody {
counter-reset: rowNumber;
}
tbody tr {
counter-increment: rowNumber;
}
tbody tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}
I now have one table that I don't want to add the counter to, i.e., disobey the CSS rule, out of the scores of tables that the site generates. Would I need to put a unique class name for those three table elements for those tables I want to obey those rules, and then change the CSS accordingly? Ugh. Just thought there may be a way of saying, 'don't follow the css on this table' for this situation.
You could add a class to the tables that should ignore the counter styles (e.g., no-counter). Then alter your styles like so:
table:not(.no-counter) tbody {
counter-reset: rowNumber;
}
table:not(.no-counter) tbody tr {
counter-increment: rowNumber;
}
table:not(.no-counter) tbody tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}
So tables that should not have counters would look like this:
<table class="no-counter">
...
</table>
More info about :not here.
The best solution would be to apply styles additively. That is, add a class to all your tables, then change the CSS:
.mytable tbody {}
.mytable tbody > tr {}
and so on. You will almost always encounter <table>s where you do not want the specific, site-wide styles, and then it's as trivial as leaving the mytable class from the table element.
If you can't do that, another option is the :not() selector: Exclude all tables with a class plain:
table:not(.plain) tbody {}
Related
I have a table inside of a table, a really simple one.
What I wanted to do is to avoid having border-bottom of td tag in the last row (tr) of the table. What I did is this:
tbody tr:last-of-type td { border-bottom: none; }
I was thinking that this is it, but then I checked the last row of not nested table and the whole nested table was not having a bottom border. Is there a way to avoid this using simple CSS without classes etc.?
To achieve no border bottom of the nested table, you can do so like so:
tbody table td {
border-bottom: none;
}
Note - the above rule makes assumptions about your CSS, which you haven't shared with us. Due to you not including the CSS that applies the border in the first place, it is possible the above won't work due to CSS specificity.
For example, if your rule that adds border to the table is:
tbody tr td {
border-bottom: [whatever style];
}
Then, the selector you need to use to remove the nested table border is:
tbody tr table td {
border-bottom: none;
}
Add your CSS, and we can more accurately answer your question. Or, better yet - read the CSS specificity article, and you'll know how to alter the selector yourself!
I'd say the simplest way is to use class and id. Like so:
table.outer { some: style; } /* class */
table#inner { some: style; } /* id */
But as you said, AVOID classes, then perhaps call the table nested within the table like so:
table { some: style; }
table table { some: style; } /* override outer table */
Is it possible using less to do a conditional? The logic I want is if a table > tr > td has an a tag, then apply padding: 20px on the a tag. If there is no a tag in the td, then apply the padding on the td itself.
What you are suggesting is not possible in CSS so LESS won't be able to do it either.
However, we can try to be clever:
table > tr > td {
padding-top: 20px;
}
table > tr > td a {
margin-top: -20px;
padding-top: 20px;
}
It looks weird and "hacky", but if i may, so does your request :)
I have a dynamically generated table and I need to style differently the 5th cell from the first row of that table.
I´m able to style the first row via:
//table.css
.mytable tbody tr:first-child { whatever styles I define.. }
Or the 5th column via:
.mytable tbody td:nth-child(5) { whatever styles I define.. }
I tried to combine this two selectors so that the cell in the 1st row, 5th column is different but without success. How can I achieve this?
You can simply use the below selector
Demo
Demo 2 (Multiple Rows)
.mytable tbody tr:first-child td:nth-child(5) {
/* Styles goes here */
}
Explanation : The above selector selects 5th td element which is nested under 1st tr element which is further nested under tbody which is further nested under ANY element having class .mytable but obviously, tbody will be used inside a table but if you want to make it specific, you can change this .mytable to table.mytable
Or you can use
.mytable tbody tr:nth-child(1) td:nth-child(5) {
/* Styles goes here */
}
Explanation: Same as above, using nth instead of first-child
With the following css I define the 1st col of the head of my table
table.search-transport tr th:nth-child(1) { width: 30px; text-align:right; }
I would like to apply this css not only on the head but also on the body of the table.
I know we can proceed in 2 lines:
table.search-transport tr th:nth-child(1),
table.search-transport tr td:nth-child(1)
{ width: 30px; text-align:right; }
But I would like to know if we can proceed in 1 signe line? Something like:
table.search-transport tr th:nth-child(1) + td:nth-child(1) { width: 30px; text-align:right; }
Thanks.
As long as it's any cell in the first column? You should be able to simply omit the th/td part altogether, as well as making use of the child selector since a tr can only have either a th or a td as a child (and you want to ensure you only select its child and not any inner elements):
table.search-transport tr > :nth-child(1) { width: 30px; text-align: right; }
(If you want to support older browsers replace :nth-child(1) with :first-child.)
Generally speaking, though, you can't choose both th:nth-child(1) and td:nth-child(1) separately while avoiding duplicating the rest of the selector. This has been covered to death elsewhere on the site already, but see here for a little extra info.
I guess you are looking for the :any pseudoclass. See https://developer.mozilla.org/en-US/docs/CSS/:any.
table.search-transport tr :any(th,td):nth-child(1) { width: 30px; text-align:right; }
Note: you'll need to vendor prefix this. Untested.
The CSS selector which you are using currently is poor in terms of performance.
Following line answers your question.
.search-transport tr > :nth-child(1) { width: 30px; text-align: right; }
Check the fiddle to see selector in action http://jsfiddle.net/LNJLf/
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