I have here an example where you can click on a row and it inserts a new row right underneath. The new row consists of a new table.
See fiddle
As you can see from the fiddle above, there is a hover over CSS in place for each table separately. The problem is now that the hover over from the parent table covers the second table.
I rather would like to override the hover over effect from the parent table when hovering over the new row, so that I can see the hover effect of the sub table instead:
I tried to prevent parent's table CSS to be applied on the new row like this:
table.cb_table-hover tbody tr:hover td:not(.override),
table.cb_table-hover tbody tr:hover th:not(.override){
background-color: #cfe2e8;
}
As you can see in this new fiddle:
However the results are not as I expected. What could I be missing?
Thanks
Try this.
CSS
table.cb_table-hover > tbody > tr:hover > td:not(.override),
table.cb_table-hover > tbody > tr:hover > th:not(.override){
background-color: #cfe2e8;
}
let me know if this helps you.
I have just added > to target direct child
Just use the CSS specificity:
.cb_inline_block {
display:inline-block;
}
.cb_table-hover tr:hover td,
.cb_table-hover tr:hover th{
background-color: #cfe2e8;
}
.cb_table-hover .sub_table-hover tr:hover td,
.cb_table-hover .sub_table-hover tr:hover th{
background-color: #cfe2e8;
}
Related
I'm using Twitter Bootstrap css for the table so the row background changes when hovered over
<table id="tableAppList" class="table table-condensed table-hover">
</table>
css:
.table-hover tbody tr:hover > td,
.table-hover tbody tr:hover > th {
background-color: #f5f5f5;
}
When the row is clicked I add the "rowSelected" class to change the background colour
Typescript:
$("#tableAppList tr").on("click", (e: JQueryEventObject) => {
e.preventDefault();
var appName = $(e.currentTarget).find("td").eq(0).find("label").text();
this.selectedAppRowId = $(e.currentTarget).attr("id");
$(e.currentTarget).addClass("rowSelected");
this.getAppUsers(appName);
});
As expected the row loses it's "selected" background color when hovered over because of the table css.
So is there a way to override or ignore the table css class for the selected row?
Have tried this so far but doesn't work:
.rowSelected
{
background-color: #606060;
color: #FFFFFF;
}
.rowSelectedOverrideHover tr:hover > td
{
background-color: #606060;
}
Perhaps the only alternative is to not use the table-hover css class and instead add a class to the row when hovered using jQuery (a bit inefficient) which I can opt to ignore if it is selected.
Any other ideas out there?
Make sure your rule for your selected background uses a selector with a higher specificity than the selector for the hover. For example, this
tbody tr.rowSelected > td,
tbody tr.rowSelected > th {
background-color: #606060;
}
has same specificity, so if you put it after the rule for the hover it will override it in all cases.
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;
}
I have a css for hovering over tables to highlight the current row.
.cb_table-hover tbody tr:hover td,
.cb_table-hover tbody tr:hover th {
background-color: #cfcfcf;
}
Additionally I could like to add another line to the same CSS to show a twitter bootstrap icon within the background of the hovered table row.
<i class="icon-search"></i>
At first I was thinking to utilise a background-image:url('??'); but the icon can't be defined like that.
Any idea if that possible? Thanks
Sure ! You cann't set background image with a image sprite
But you can put the icon inside td/th tag and use "display" to show/hide the icon:
.cb_table-hover tbody tr td .icon-search,
.cb_table-hover tbody tr th .icon-search{
display: none;
}
.cb_table-hover tbody tr td:hover .icon-search,
.cb_table-hover tbody tr th:hover .icon-search{
display: inline-block;
}
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;
}
I have a table structure, where I can't access jsp file to add class files. I have to manage it through CSS. In this case, I need to apply background color for first table all th's. Not to nested table th's. How can we do this with CSS? Example : http://jsfiddle.net/qdDnJ/
As per i understand may you can write like this:
tr th{
background:red;
}
tr table th{
background:none;
}
Check this http://jsfiddle.net/qdDnJ/2/
Distinguish first table's th from the second table's th.
Edited after comment:
See here, http://jsfiddle.net/qdDnJ/25/
I have assumed that div is parent container of first table.
You can replace it with table's parent.
e.g. If body is parent, css should be,
body > table > tbody > tr > th {
background-color:red;
}
You could do this:
table th:first-child {
background: red;
}
table table th:first-child {
background: none;
}
I would just give the outer table a class and use this:
table.class-name th:first-child {
background: red;
}
Every body tried many things to achieve the target as per the question.
but as per the HTML we can just write the following css and avoid child th to get background-color..
in this solution we do not need any id and class or any thing accept the .gap class. Even if this class is not there we can apply the css.
check the demo
HERE is the CSS with .gap class
table th {background-color:red;}
table td.gap tr th {background:none;}
HERE is the CSS without .gap class
table th {background-color:red;}
table td tr th {background:none;}
The simplest way I know is to use the child selector
#yourtableId > tbody > tr > th { background: red; }
Demo