How can I "collect" CSS statements? I have several th classes that I want to align the same like table.t-data-grid thead tr th.*
How can I collect eg the following?
table.t-data-grid thead tr th.depot, table.t-data-grid thead tr th.amount ... {
}
Do you really need that complex a selector? The less complex your selector is, the better is its performance. So just put in just as much as is necessary to target the correct elements.
It looks like, you would be better of with just
.t-data-grid .depot, .t-data-grid .amount { ... }
Related
couldn't find anything so here's my Markup:
<style>
table {
width:300px;
border-collapse:collapse;
}
th.price
{
text-align:right;
background:yellow;
}
th, td
{
border:1px solid #aaa;
}
</style>
<table>
<thead><tr><th>Item</th><th class="price">Price</th></tr></thead>
<tbody>
<tr><td>Item1</td><td>12.30</td></tr>
<tr><td>Item2</td><td>23.40</td></tr>
<tr><td>Item2</td><td>45.60</td></tr>
</tbody>
</table>
https://jsfiddle.net/2b67rw5o/
Desired output:
So I don't want to apply .price to each table cell or use :nth-child or jQuery .. would it be possible with css only?
I don’t think you can apply a class to td elements based on the class applied to a th element, in css.
You don’t want to use jQuery, but you can use vanilla javascript:
const cssClass = "price";
const th = document.getElementsByClassName(cssClass)[0];
const thead = th.parentElement;
const idx = Array.prototype.indexOf.call(thead.children, th);
const tbody = th.parentElement.getElementsByTagName("tbody")[0];
Array.prototype.forEach(tbody.getElementsByTagName("tr"), tr => {
tr.children[idx].classList.add(cssClass)
})
I don't think what you want to do is possible in CSS today. Although it was often requested, you can't travel (at least now) over parents with CSS selectors because CSS cannot pass information upwards in the DOM hierarchy. But this specific feature would be the minimum requirement to determine the index of the children in the following rows that need to be styled.
For more on that see the answer of "Is there a CSS parent selector?", which is stating "There is currently no way to select the parent of an element in CSS. (...) That said, the Selectors Level 4 Working Draft includes a :has() pseudo-class that will provide this capability."
With the currently drafted :has() you could at least build a repetitive CSS solution with a finite column count like this:
/* For a column of three columns maximum: */
/* if price is first column */
table:has(thead > th.price:first-child) tbody > td:first-child,
/* if price is second column */
table:has(thead > :first-child+th.price) tbody > :first-child+td,
/* if price is third column */
table:has(thead > :first-child+*+th.price) tbody > :first-child+*+td {
...
}
Crappy, I know... but currently the only native CSS solution in a possible foreseeable future.
But for now depending on what you need, you could also "cheat": If the background and/or border of the column should be changed you can use styling of the th header cell only (e.g. by abusing :before and :after). But text content specific changes would be quite impossible without JavaScript.
I have a relatively long table. Each record has six rows. So an item with an identifier of 16 has <tr-16-1><tr-16-2>.....<tr-16-6>, identifier 25 would be <tr-25-1><tr-25-2>.....<tr-25-6>, etc.
I would like the page breaks to not split any grouping of the six rows. So if <tr-25-6> would continue on a new page, I would like all <tr-25's> to break with it.
I can easily attach a class to all six rows if that would help. Can anyone please point me in the right direction on how to do this? Thanks so much for your help.
A possibility is grouping all the rows that are referring to the same record inside a single tbody, so you have more tbody each one containing 6 rows (it's perfectly fine and seems to be logical as an atomic group),
then add this rule for media print
#media print {
tbody {
page-break-inside: avoid;
}
}
In this way a page break inside a tbody will be avoided.
Unfortunately page-break-inside is supported on every modern browser except Firefox (Bug #132035)
I would give this a shot:
#media print {
tr, td, th { page-break-inside:avoid }
}
If you don't want to use the #media tag, this is another way:
Add class=print-entire to your table, and add this style:
table.print-entire tr td, table.print-entire tr th {
page-break-inside: avoid;
}
I don't know exactly how I can describe this? I think its better if you look at the jsfiddle I have made..
As you can see there is a hover on some TR elements and if the TD already has another bgcoler it has to change to an alternative bgcolor..
It works fine in the first 3 rows, but if there is nested a new table deeper in the DOM the green TD's in the new table does always have the :hover class
jsfiddle
http://jsfiddle.net/VvZuV/1/
Change this:
tr:hover td.green, tr.deep:hover td.green {
background:#7bcf81;
}
To this:
tr:hover > td.green, tr.deep:hover > td.green {
background:#7bcf81;
}
No new class needed.
http://jsfiddle.net/rCztp/
Explanation
As soon as you hovered over the <tr> that contained the <table>, all children, grand-children, and etc, were affected by your css rule. Using > means that only children will be affected.
I have a HTML <table>.
I want to have columns 2 and 4 of that table be hidden by CSS. Is there a method to have CSS detect the column number of a td element?
Use jQuery if you can:
$("table td:nth-child(2)").addClass("col2");
$("table td:nth-child(4)").addClass("col4");
CSS:
.col2, .col4 { display: none }
Some CSS 3 answers have been given. A CSS 2-compatible solution would be the following, assuming you can identify the table somehow (pretend it has the class "foo"):
table.foo > tbody > tr > td:first-class + td, /* column 2 */
table.foo > tbody > tr > td:first-class + td + td + td /* column 4 */
{display: none;}
Note that this doesn't select th elements or headings in thead or tfoot. You could copy the two selectors to read "th", but if you can trust the integrity of your markup to not have anything but th and td inside a tr and tr only in thead, tfoot, or tbody (the only valid possibilities); you could do something like this:
table.foo > * > tr > :first-class + *, /* column 2 */
table.foo > * > tr > :first-class + * + * + * /* column 4 */
{display: none;}
This works fine in browsers newer than IE6, generally, which is almost always acceptable.
If IE6 support is mandatory -- and be utterly sure it is before bothering to go down this road -- a combination of valid CSS2/3 and Javascript in a conditional comment is the simplest solution (avoid using Javascript for layout when the job doesn't require it).
Add classes to the appropriate rows, and then you can use that to hide those rows.
There are nth-child selectors, but those will only work on more recent browsers.
Take a look at the nth-child and nth-of-type psudo classes.
Something like
td:nth-of-type(2) { visible: false; }
td:nth-of-type(4) { visible: false; }
You can do that with CSS 3 selectors - specifically :nth-child. Note that this solution won't work on most browsers at present (it basically only works properly in Firefox 3.1b and higher).
If you don't have access to change the classes, and you can't use JavaScript, then I'm afraid you're out of luck.
You can, but since that is CSS3, it won't work on IE and older versions of Firefox and some other browsers. Check out :nth-child.
IMHO, the best you could do is add a class to each row you want to target.
Tanks to everybody, I had to use jquery, I could not find how to do that from pure CSS2 , IE doesn't support CSS3 :(
Basically I have a theme in my ASP.NET application and it contains a css file that turns all my tables blue, which looks great.
It looks like this
table
{
background-color: #DEF1FF;
border-color: #DEF1FF;
color:#5793C9;
}
td
{
// TD properties
}
But now I want one table to be a different colour. I created a class to override it:
.BlankTable
{
background-color:#FFFFFF;
color:#5793C9;
font-size:medium;
font-weight:bold;
margin:2px;
}
I set a <table class="BlankTable"> and I have two problems:
firstly, if I put another table inside that one, it does not inherit BlankTable but uses the original table part of the css file
secondly, if I use the td part to set a td specific property (like padding), it doesn't carry across - <table class="BlankTable><tr><td>hello world</td></tr></table> results in the using the td I put in the CSS file.
Ideally what I want is to set my CSS code like this:
.Blank
{
background-color:#FFFFFF;
color:#5793C9;
font-size:medium;
font-weight:bold;
margin:2px;
table { // properties }
td { // properties }
}
so it uses the table/td properties I specify for the .Blank css class. Is there any way to do this or to refactor my code somehow so I can have all tables looking blue by default, and be able to override it easily?
You can do that, but the syntax is :
.Blank
{
background-color:#FFFFFF;
color:#5793C9;
font-size:medium;
font-weight:bold;
margin:2px;
}
.Blank table { // properties }
.Blank table td { // properties }
These last 2 rules will match a table and td located inside anything with class "Blank".
Use it like this:
.Blank table {...}
.Blank td {...}
Although I must warn you: there are rare cases where you should use a table inside another table.
The other answers are correct, but it's worth pointing out that this is just one type of CSS selector (the descendant selector). There are all sorts of other CSS selectors that you might want to use to target specific elements.
It's worth getting familiar with them - you might be surprised with what can (and can't) be done. (Using jQuery will also be a lot easier if you are familiar with CSS selectors.)