I use even & odd CSS rule for a table but that's also the changing <thead>.
thead {background-color: #999;}
tr:nth-child(even) {background: #fff}
tr:nth-child(odd) {background: #C8C8C8}
The result is that my <thead> is #C8C8C8 and not #999.
So my question is, is that possible to use even & odd without that's affect the <thead>?
You can add tbody to you selector so that the rule only applies to tr:s within your tbody:
tbody tr:nth-child(even) {background: #fff}
tbody tr:nth-child(odd) {background: #C8C8C8}
Sure, use tbody selector:
thead{background-color: #999;}
tbody tr:nth-child(even) {background: #fff}
tbody tr:nth-child(odd) {background: #C8C8C8}
Because you are using <tbody> elements on your <table>, right? If don't, you should use it :)
Related
I'm using Bootstrap 3 and applied table-striped table-hover to my table's class.
However, I have changed the default striped color to green. So I have green - white - green - white for my columns.
Now, when I hover, the white turns to blue. This is fine. But when I hover over the green, it stays green.
How can I have every row, on hover, show #ecf3f8?
I've tried this to no avail:
.table-hover tbody tr.odd:hover td, .table-hover tbody tr.odd:hover th {
background-color: #ecf3f8;
}
Sounds like a specificity problem. Try the following:
.table-striped.table-hover>tbody>tr:hover>td,
.table-striped.table-hover>tbody>tr:hover>th {
background-color: #ecf3f8;
}
Try this:
.table-striped tbody tr:hover td,
.table-striped tbody tr:hover th {
background-color: #ecf3f8
}
You can try it here: http://www.bootply.com/2Gp7XHJ9jV
Source: https://github.com/twbs/bootstrap/issues/3223#issuecomment-5735608
try this:
.table-hover tbody tr:hover td {
background: #ecf3f8 !important;
}
edit: also try this:
.table-hover > tbody > tr:hover > td {
background: #ecf3f8 !important;
}
This simple style works to provide alternating background-color[s] in my tables in Firefox and Chrome, but fails in IE 11 (and, I presume, earlier versions). In the latter, no color is there and my background-image shows through.
.recordtable tr:nth-child(even) {background-color: #eee;}
.recordtable tr:nth-child(odd) {background-color: #ddd;}
Can I get this to work in IE? Thank you.
I've had issues with IE in the past when trying to style a tr element. Try styling the child td elements instead, like so:
.recordtable tr:nth-child(even) td {background-color: #eee;}
.recordtable tr:nth-child(odd) td {background-color: #ddd;}
You can achieve it by using CSS and jQuery
CSS:
.recordtable tr.even{background-color: #eee;}
.recordtable tr.odd{background-color: #ddd;}
jQuery:
$(document).ready(function() {
$(".recordtable tr:nth-child(even)").addClass("even");
$(".recordtable tr:nth-child(odd)").addClass("odd");
});
I have a simple table:
<table class="table table-condensed table-striped">
<tr>
<td>First Name</td>
<td>Last Name</td>
</tr>
<tr>
<td>teste1</td>
<td>teste2</td>
</tr>
</table>
With a custom CSS:
tr:first-child {
color: #696969;
background-color: black; !important;
}
The color is applied, but the background-color, isn't. Why? With last-child the background-color works. Thanks.
Update: If I remove the table-striped it works. But I need to keep it.
Update2: table-striped Bootstrap CSS:
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9;
}
Found it, it's selector problem,
The selector B3 using is more specific, now, place your css as sequence as below.
Example:
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/custom.css">
and add this css in the custom.css
.table-striped > tbody > tr:first-child > td,
.table-striped > tbody > tr:first-child > th {
color: #696969;
background-color:#000;
}
I've tested and the result is what you need.
http://jsfiddle.net/TAp7T/1/
Change
background-color: black; !important;
To
background-color: black !important;
you don't need important just add more classes or an id to the selector to make it work like this and apply your style to the td.
table.table-condensed.table.table-striped tr:first-child td{
color: #696969;
background-color: black;
}
fiddle here
Irrespective of !important, the CSS style gets applied to first-child or last-child. See in JSFiddle first for first-child and JSFiddle last for last-child. Probably, you have shown only a part of your project, so we can only analyze based on the info you have given. The code really applies the background-color to any child.
I am trying to use the CSS3 :not selector. Basically, I have a table that when you hover a row, the background color changes:
.table-hover tbody tr:hover > td, .table-hover tbody tr:hover > th {
background-color: #272727;
}
On one of the <tr>'s I apply a latest-review class to the row. When I hover over thelatest-review row, the background color still changes because of the above CSS. I'd like it not to change colors. I've tried this and failed:
.table-hover tbody tr:hover > td:not(.latest-review), .table-hover tbody tr:hover > th:not(.latest-review) {
background-color: #272727;
}
I am not really sure what else to try at this point. I am using Chrome currently and I am not worried about the :not selector not being supported in older browsers.
Well, you write that .latest-review is applied to <tr>, but your code snippet uses <td> and <th>. Either way, it's easier imho to simply add a simpler second rule after your hover rule (and not use :not):
.table-hover tr:hover {
background-color: #272727;
}
.table-hover .latest-review {
background-color: %original_color%
}
The first CSS rule overrides the second. Either remove the first one or reset the color:
.table-hover tbody tr:hover > td.latest-review, .table-hover tbody tr:hover > th.latest-review {
background-color: default-color;
}
Is there a simple way to remove the tr:hover style from twitter bootstrap such that I can still use their table styling without getting the row highlight on hover?
#Blender's answer is right on, but only if you are not using the .table-striped class on your table.
If you are using the .table-striped class, the row highlight will not go away when you hover over a row that has the light-grey colored stripe.
What will happen when you hover over the light-grey row is that the row will change from light-grey to transparent (white), and thus you will be inadvertently implementing a row-hover effect on all the light-grey colored rows.
If you need to take away the hover effect from the striped rows as well, then building upon Blender's original answer, I think you would have another rule to over-ride:
.table tbody tr:hover td,
.table tbody tr:hover th {
background-color: transparent;
}
.table-striped tbody tr:nth-child(odd):hover td {
background-color: #F9F9F9;
}
good example: Here's a link to a working jsfiddle example where the .table-striped class is accounted for:
http://jsfiddle.net/pXWjq/
buggy example: And here's an example where the table row hover still happens (on the grey rows) because the grey-row hover is not accounted for:
http://jsfiddle.net/448Rb/
Override these rules:
.table tbody tr:hover td,
.table tbody tr:hover th {
background-color: #f5f5f5;
}
Using this:
.table tbody tr:hover td,
.table tbody tr:hover th {
background-color: transparent;
}