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;
}
Related
I have 2 tables on a single html page.
I would like to remove the border on just one of them.
The css I have currently is...
.table th, .table td {
border-top: none !important;
}
this is also linked with the table (I have bootstrap on it also, I think the table class is also linked with that?)
<table class="table">
<tbody>
<tr>
<th>1</th>
</tr>
<tr>
<td>1</td>
</tr> etc.....
So in the CSS I just want to make a rule that applies no border to only one of the 2 tables on my page. However I can't figure out how to to do it because the are using the same table class, and not sure if I need more than one rule? I've tried using parent selectors and ID selectors but could be calling them wrong. Thanks everyone!
You could just add a unique class or id to whichever table you do want to style and target that selector in your CSS. Like so:
HTML
<table class="table unique-name">
...whatever contents
</table>
CSS
.unique-name {
// some styles.
}
UPDATE
Here's a Fiddle to show you what I'm talking about.
Notice that the table with the class styled-table assigned to it has some formatting, while the table with the class unstyled-table has no formatting.
One way to do it would be to add another class to table you want to remove the border from.
Something like <table class="table noborder"> and then apply whatever css you want to the noborder class.
The proper way would be to have styles on the table, and then modify the table accordingly. This would be an example of how:
.table--bordered {
border: 1px solid #666;
}
<table class="table">
// No Borders
</table>
<table class="table table--bordered">
// With Borders
</table>
Bootstrap class for bordered table is table-bordered. If you don't use it, there'll be no border on table.
Much better explained with an example:
Fiddle.
I have 2 tables, one of which has a class:
<table>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
<!-- more rows -->
</table>
<table class="letters">
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
</tr>
<!-- more rows -->
</table>
I have 3 rules for table rows. I want the "letters" table to have red rows, and tables with no classes to have blue rows. I also want all rows in all tables to highlight in yellow when the mouse is over them. Hence these rules:
table tr {
background-color: #33CCFF;
}
table tr:hover {
background-color: #FAF3B1;
}
table.letters tr {
background-color: #FF8888;
}
However, the hover rule is only applied to the first table (the one with no class), and not the "letters" table. If I remove the 3rd rule, then, as expected, both tables have blue rows, and the yellow highlighting works.
When I have the 3 rules, they seem to be saying:
make the background color of all table rows blue
make the hover color of all table rows yellow
make the background color of all table rows in tables of class "letters" red (override rule #1 for tables of this class)
So why does the existence of rule #3 make rule #2 stop working? I'm not saying anything about the hover pseudoclass for "letters" table rows, so why doesn't the general rule for all tables apply?
This is actually a case of CSS selectors overriding each other - the third rule overrides the second rule. Just try rearranging them:
table tr {
background-color: #33CCFF;
}
table.letters tr {
background-color: #FF8888;
}
table tr:hover {
background-color: #FAF3B1;
}
Here's a JSFiddle to demonstrate. Hope this helps! Let me know if you have any questions.
EDIT: Here's a resource on CSS specificity that may also help you understand the situation better. Note how a class and a pseudo-class both contribute the same specificity to a selector, which is why one is overriding the other.
Your CSS rules' order need be reversed. Sometimes the order it is rendered may cause some problems so the rules you think more important must not be overridden and is after other rules.
It works properly when changing the order of them.
table.letters tr {
background-color: #FF8888;
}
table tr:hover {
background-color: #FAF3B1;
}
Here's fiddle.
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.
I am working on existing project. I created a simple table.
<table border='0' width='100%'>
<tr>
<td></td><td></td>
</tr>
<tr>
<td></td><td></td>
</tr>
</table>
I did not apply any CSS class on table but still it is showing blue background color when I mouse over on tr. So there is already some CSS implemented on table somewhere. I want to disable this effect but I can't change existing CSS.
How can I stop this mouse over effect on this specific table. I tried some inline CSS but it did not work yet.
just use !important on your css which should override existing css
tr:hover {
background:red !important;
}
You can try to reassign css property using "!important;" keyword. Simply create the new css property with this keyword and bind it to necessary tag. I think this is a hack, but in any cases it very helps me.
If you want to make the hover changes only to this table tr , then its better to assign an ID or class to the table and then write the CSS.
.tableclass tr:hover{
background:none !important;
}
There is a table. How to set specific background color for the last column using CSS? I need to do it without appending any classes or style attribute to TD elements and without using javascript.
In css:
td { background: blue; }
td:last-child { background: red; }
These are called pseudo classes
You can get more info at:
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
http://msdn.microsoft.com/en-us/library/cc351024(v=vs.85).aspx
You could use the last-child selector, but be warned that IE probably won't like this.
It'd go something like this:
#myTable tr td:last-child {
background: red;
}
I would use the <col> tag in HTML. <col> can define specific attributes for certain columns.
<col/>
<col/>
<col style='width:500px; background:red;' id='says_col'/>
Would make the width of the third column 500px and the background red. These are very useful because they can be used to get to other things on specific columns. Here are some resources you might find useful.
http://www.boogiejack.com/html/html-col-tag.html
http://www.w3schools.com/tags/tag_col.asp
The server-side technology usually helps for this, by adding a "last" class to the last td element. Then, all you need is :
td.last {
background: /* bleh */;
}
The col solutions sounds fun, even though I've never used it.