I have created a sample page with a table. Should the page get deleted in the future, here's the code on Pastebin.
I want to highlight table rows on hover. It works for normal tr but it doesn't work for tr.alt (odd rows).
Code for highlighting:
tr:hover,tr.alt:hover
{
background: #f7dcdf;
}
Code for making odd rows different colour:
tr.alt td
{
background: #daecf5;
}
Any ideas how this could be fixed?
Make sure the rule for the hovering effect is below the .alt color as this overwrites previous rules or add !important
tr:hover,tr.alt:hover
{
background: #f7dcdf!important;
}
Also note you are applying the background color for the .alt rows to the cells (td's), this color will appear "in front" of the tr background so change your rules so both are for cells or for the whole rows
The problem is that tr.alt td is more specific then tr.alt:hover according to css cascading rules.
The easy way would be to make sure that the :hover rule becomes more specific then the .alt rule. This can be done by changing tr.alt td to tr.alt
As a sidenote, are you aware that you do not need the .alt class to target the odd rows? There is a very usefull :nth-child() pseudo class that can take care of that for you. You can read all about it here: http://css-tricks.com/how-nth-child-works/
I took the liberty to apply this to your sample: http://jsfiddle.net/3tV9b/
Note that all I did was change tr.alt td to tr:nth-child(2n+1) and removed all selectors that had the .alt class.
The big advantage of this technique is that you do not need to bother about maintaining the HTML, you can just add and remove rows as you wish, and the alternating color should keep working.
Disadvantage is (off course) the support in IE, but I think this is not really a loss of functionality, and well within the boundaries of graceful degrade.
Related
I've been using 'border = 1' in my HTML, which looks fine, but I realise it would be better to use CSS, so I created a basic border class, like so...
.basicborder table, .basicborder th, .basicborder td {
border: 1px solid black;
}
The borders appear around the th and td's but not around the outside of the table itself. Have I done something wrong?
CSS looks fine to me, but you can better use:
table.basicborder, th.basicborder, td.basicborder{border: 1px solid black;}
So, the selector starts with the least specific selector (the HTML element, instead of the class).
But it should already work fine, if you have linked your HTML properly. Do your table, th and td elements have a class="basicborder" attribute each?
edit:
If i comprehend correctly, this would be the best solution.
You make a basic style for all 's with just table,td,th{ etc...
Then you add to the ones with a different style a class, lets stay differentborder.Now you make a CSS saying the following: table.differentborder, .differentborder td, .differentborder th{ your style }
This selects your tables with the class, and all td's an th's where a parent has the class differentborder.
For more fun with CSS selectors you can look on the W3Schools CSS Selector Reference
I have the first row of a table styled as follows:
.Table1 tr:first-child td { ... }
I also want a hover style on part of this row, and I've tried these 2 as the next rule, but neither of them works:
.Table1 tr:first-child:hover td { ... }
.Table1 tr:first-child td:hover { ... }
They do both partially work - some td cells in the row have no content, and have a class of emptyColumn, and these cells do have the hover styling applied to them (but only if the styling is !important). However, the cells which do have text content are not styled.
From my (very) limited understanding of specificity, if the first rule actually works, then surely the second rule should also work, since it's more specific? Is there something else that could stop it working?
However, what I actually need is slightly different from this. I only want the hover to work on certain td cells in the tr, and I've given these cells a class of colHeaderButton:
td.setAttribute('class', 'colHeaderButton');
I can't find any way to apply the hover style using the class name - I've tried various combinations such as
.Table1.colHeaderButton tr:first-child td:hover { ... }
but I can't get any of these to work. Thanks.
The td is a member of the class, not the table.
.Table1 tr:first-child td.colHeaderButton:hover
I'm currently trying to use an HTML table with an HTML table, and I'm using the following CSS style for the outside table:
table.jobtable tr:nth-child(4n+1)
{
background-color: #65594D;
}
table.jobtable tr:nth-child(4n+3)
{
background-color: #3E362F;
}
I want to be able to make a table inside one of the rows without adopting it's background color. However, everything I seem to try results in the background color being adopted. Seems like such a trivial thing to be stuck on.
Any help appreciated.
Easy peasey:
table table {
background: none; /* Or whatever background you want */
}
You can use the > selector in css.
table.jobtable > tr:nth-child(4n+1)
{
background-color: #65594D;
}
This will only apply the style to tr elements that are direct children of table.jobtable, so it won't cascade down to the next table. [If you use a tbody tag, you'll need to do table.jobtable > tbody > tr:nth-child(4n+1).]
Assuming you're specifically setting the background color of the inner table (as I don't know of a CSS property value that will cause the selected elements to inherit the property's value from an element that is not the closest element in the chain that has the property set to a specific value) and you've already tried selecting the nested table as a child of the outer table (as per 3rror404's answer), you probably need to increase the specificity of the selector for the inner table.
http://www.w3.org/TR/selectors/#specificity
Here's the specificity calculations for CSS2.1 if you're working with an older browser: http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#specificity
I am trying to create a data table, where I am facing few issues with styling.
1) I am trying to apply alternating row to TR which is not firing.
Is there any way to apply the alternating style without passing the class to all the TD's
with in each TR..?
2) Colgroup is working in IE8, particularly with alignment
(cols=A&SI Capital Allocation, Cap Var, A&SI Expense Allocation, Exp Var)
Is there any way to apply fix this issue
Here is the code: http://jsfiddle.net/yvJ75/1/
You can use CSS3 pseudo-classes nth-child(odd) and nth-child(even).
I have updated the code here: http://jsfiddle.net/yvJ75/12/
These are the changes in the CSS
/*
.bg-oddrow {
background-color:#fbfcfb !important;
}
.bg-evenrow {
border-bottom:1px solid #dadada !important;
}*/
table tr:nth-child(odd) td{
background-color:#fbfcfb !important;
}
table tr:nth-child(even) td{
border-bottom:1px solid #dadada !important;
}
Is there any way to apply the alternating style without passing the
class to all the TD's with in each TR..?
Yes - you can apply the class like <tr class="even-row"> and use a css selector like tr.even-row td to apply background to <td>. This approach works in all browsers. You could even use tr:nth-child(odd) and tr:nth-child(even), but this are css3 pseudo classes.
Colgroup is working in IE8, particularly with alignment (cols=A&SI
Capital Allocation, Cap Var, A&SI Expense Allocation, Exp Var)
Is there any way to apply fix this issue
You mean it's not working? Columns accept only border, background, width and visibility css properties. Td's won't inherit other properties since they are not a direct descendant of the col element (a bit on understanding this can be found here). The most solid way is to set a class on td and style the td contents trought that.
I was was just wondering how to get this kind of design done when things are fetched dynamically? I mean there has to be only one class which can be used to get the background colour depending upon whether block is odd or even. I hope my requirements are clear: background color varying with the odd or even number for the rows.
You're looking for alternating rows. This is accomplishable by adding a different class to every other row.
Tutorials are plenty on how to do this.
CSS3 also provides a new way to do this without adding classes:
tr:nth-child(odd) { background-color:#eee; }
tr:nth-child(even) { background-color:#fff; }
As you've not specified a language for what's returning the code I'll give you a pure CSS answer.
tr:nth-child(2n+1) {YOURSTYLEINHERE}
or
tr:nth-child(odd) {YOURSTYLEINHERE}
Add a second css class for the alternating row. Assuming that the default bg color here is dark gray, the second class would look like this:
.altRow
{
background-color:white !important;
}
If you don't want to have to code the logic server-side for applying the second class, you can use JQuery's Odd selector. But that's about as close are you're going to get to zebra-striping without just manually applying a second class.
What you want is modulus division
if(rowNum % 2 == 0) {class="even"} else {class="odd"}
OR if you are using CSS3 you can do it like this
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}