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
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 a table, let's say with 3 rows,
I want the first two to be aligned vertically to the top, and second one to be vertically aligned to the middle.
If I try to define:
td {vertical-align:top}
tr.middle {vertical-align:middle}
and in the html, assign class="middle" to the relevant <tr>,
it doesn't work, as the td definition would persist.
only way i've managed to do is is to define
td.top {vertical-align:top}
td.middle {vertical-align:middle}
and then assign the relevant class to every single td, which is too much code.
any way to do this with minimum code?
Simply do this, no need to edit your HTML or add classes.
tr:nth-child(1) td {vertical-align:top;}
tr:nth-child(2) td {vertical-align:middle;}
tr:nth-child(3) td {vertical-align:bottom;}
Demo http://jsfiddle.net/v68ao3pv/1
If you need IE8 support:
tr:first-child td {vertical-align:top;}
tr:first-child + tr td {vertical-align:middle;}
tr:first-child + tr + tr td {vertical-align:bottom;}
Demo http://jsfiddle.net/v68ao3pv/2/show
Yes, there is a way. You can use Descendant selectors. That means, you assign the class “top” to the first tr and the class “middle” to the second one and write in CSS:
.top td{vertical-align:top}
.middle td{vertical-align: middle}
// ↑
// THIS space is important.
So it selects all table cells within an element with the top/middle class. This is something very practical which you can use quite often.
More about CSS selectors on the website of the W3 Consortium.
Using your current CSS, make the .middle rule selector more specific:
td {vertical-align:top}
tr.middle td {vertical-align:middle}
In this case, all td will align to the top by default and the more specific selector will force all the cells in the .middle rows to align to the middle.
Doesn't get much more minimum than this Fiddle: http://jsfiddle.net/sqhxqdck/
Unless I'm misunderstanding your question, all you really need is:
tr.top {
vertical-align: top;
}
Due to the cascading nature of cascading style sheets.
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.
In the following example
http://jsfiddle.net/xBRPg/
I'm trying to create a yellow background for one of my table rows. The following line of code
<table class="table table-bordered table-striped">
Seems to supersede my own styling. If I remove the classes the row appears yellow as desired. Is there some way to maintain the classes yet override the setting so that my colour takes top priority?
The row is yellow. It is just that the cells inside it are #f9f9f9 so you can't see the row's background colour through them.
You need to change your selector to match the cells in the row, and not the row itself. You will also need to increase the specificity of the selector as the ones being used already are more specific then you have.
This occurs because of CSS specificity - table.table-striped tr is more specific than table tr. More specific rules override less specific ones. In my opinion you should avoid !important as long as possible, and instead focus on making your selectors more specific. So in your case, make that:
table.table-striped tr.zebraHover td {
background-color: #FFFACD;
}
Change this in your css
tr.zebraHover td {
background-color: #FFFACD !important;
}
And yes I know it is very dirty. If someone knows this better, comment on my answer. I'd rely like to know a better solution!
Change the class to an id.
CSS:
#zebraHover td{
background-color: #FFFACD;
}
HTML
<tr id="zebraHover">
<td>1</td>
<td>User1</td>
<td>user1#gmail.com</td>
<td><a class="btn btn-danger" href="#">Deactivate</a></td>
</tr>
http://jsfiddle.net/xBRPg/
The problem is caused by the rule that set alternating background colors for rows using selectors with high specificity. To suitably override them, use e.g.
tr.zebraHover,
.table-striped tbody tr:nth-child(2n+1).zebraHover td
{
background-color: #FFFACD;
}
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.