is it possible to set the style of alternating rows in a html table with style selectors that only take account of the hierarchy of elements and do not use style names?
i need to style html output produced by a server component and the output does not set styles for alternating rows. i could write a javascript (or just as well change the component) but i am curious about whether it is possible to do in pure css.
thanks
konstantin
In CSS 3:
tr:nth-child(odd) { background-color:#eee; }
tr:nth-child(even) { background-color:#fff; }
And in CSS 2, you have to use some class on e.g. even rows like:
.even { background-color: #00000; }
and you have to apply them when generating the rows server-side (or in hand ;-) ) or with e.g. jQuery like:
$(document).ready(function () {
$("tr.nth-child(even)").addClass("even");
//Or
$("tr:even").addClass("even");
});
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'm using <p-dataTable [rowStyleClass]="rowStyler" etc>, and the method in my component looks like this:
newRowFormat(rowData, rowIndex) {
return('newRow');
}
And in the component CSS, that class newRow looks like this:
:host /deep/ .newRow {
background-color: gold;
}
The result is that every other row of the table is being colored gold, when every row should have that class applied to it. Long story, but I want the class applied to every single row, not every other row.
Ideas?
Well, the solution (at least for now) turned out to be to use the forbidden !important rule:
:host /deep/ .newRow {
background-color: gold!important;
}
Don't really like it (or understand why it works), but it works. Trying to override PrimeNG styles is requiring me to use :host /deep/ as well as !important in this case.
I'm using Sass-Lint in my build system and am getting the warning Attribute-selector should be nested within its parent Type-selector when using the following selector:
input[type='text'],
input[type='number'],
input[type='email'],
input[type='password'],
select,
textarea {
color: gray;
}
How can this be updated to prevent the warning messages, but also apply the CSS properties to all of these elements? (I obviously don't want to apply the attribute selectors to select and textarea, but not sure how else to do it without having two separate selectors with duplicate properies?)
try this one, hope will be helpfull.
// sass-lint:disable-block no-qualifying-elements force-attribute-nesting
input[type='text'],
input[type='number'],
input[type='email'],
input[type='password'],
select,
textarea {
color: gray;
}
I am using sapui5 where all the tables are preformatted
with SAP's css classes.
I have my own table where I want to remove all borders .
The table is designed with the id selector.
My question: how am I to remove SAP's class restraint
so that only my table is excluded from this class
attributes
e.g
#myTableClass :not .SAPClass>tr
{
border : 0px !important;
}
All other tables in my HTML doc should go
on inherting SAP's original class attributes.
Any suugestion will be highly appreciated
rgds
Yuval
If you're just trying to apply no borders on the table, do this:
.your-class-name {
border: none !important;
}
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.)