I have used .table-striped class for one of my tables. Unfortunately, I use more tables inside this table, which also became striped.
How to make inner tables be not striped?
Why not create a new style much like .table-striped and use the immediate child selector [>] [MDN link]1 so it only selects the immediate tr and not all the tr children in the table?
.table-striped__immediate-only > tbody > tr:nth-of-type(odd) {
background-color: rgba(0,0,0,.05);
}
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.
Let's say I want to find all tr elements, children of tbody, having either class trEven or trOdd (unfortunately there are also elements not having these classes). How can I get all of them in a single query?
I tried $("tbody > tr.trOdd + tbody > tr.trEven")
but it returns 0 elements.
Use commas for multiple css selectors:
$("tbody > tr.trOdd,tbody > tr.trEven")
FTR, your css would have matched
tbody
tr.trOdd
tbody
tr.trEven <-- this one
I would like to select all cells in the table header which have the colspan attribute set.
Of course I could do something like:
table thead th[colspan="1"],
table thead th[colspan="2"],
table thead th[colspan="3"] {
}
but I'm looking for something like this:
table thead th[colspan*=""] {
}
which does not seem to work.
Question:
How to select all cells with colspan set in a table?
Thanks!
Just use
table thead th[colspan]
According to the CSS 2.1 spec,
[att]
Match when the element sets the "att" attribute, whatever the value of the attribute.
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 { ... }
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.