I am trying to change the background-color of rows that contain my found class in a striped bootstrap table. It works for even rows because bootstrap doesn't have a background color for them, but odd rows I am blocked by bootstraps CSS.
Bootstrap CSS:
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9;
}
Custom CSS:
tr.found{
background-color:#CECBCB;
}
How would I override bootstrap's CSS for only a single row at a time (as you can see in demo, odd rows are not overridden)?
BOOTPLY DEMO
Write specific selector to override the bootstrap ones
table.table.table-striped tr.found td {
background-color:#CECBCB;
}
Demo
Also, not only specificity matters here, make sure you apply the background to the td element and not the tr because bootstrap is applying to the td element so even if you apply the background to tr won't make sense.
As you said that you wanted the explanation for the selector I wrote, so here it goes, let us break that and understand..
Starting off with this
table.table.table-striped - Over here am selecting a table element having classes .table AS WELL AS .table-striped
Going further with the selector, tr.found we select the tr elements having a class called .found and lastly, we select the nested td elements.
.table-striped>tbody>tr:nth-child(odd)>td,
tr.found{
background-color:#CECBCB;
}
In addition to Mr. Alien's solution, I found that the following works in Bootstrap 4 without explicitly overriding the table style.
tr.found td{
background-color:#CECBCB;
}
Bootply Demo
Related
In very simple html/css, I have my menu in a <table id="menu">. The menu has no border, however I would like all the other tables in my blog to have borders.
I made it work this way:
#menu, #menu th, #menu td {border: none; color: red}
table, th, td {border: 1px solid black;}
However this is not very robust. If I add something else to tables I might forget to 'reset' it in #menu. Is there a way to force all properties in #menu so that I don't have to override one by one anything I would add to table, th, td {...}?
I tried the :not() selector but it doesn't feel robust either, I would rather specify what I want for menu on the #menu {...} line, not elsewhere. Let me know if that makes sense or I can reformulate
I think that I understand now. I was searching for a way to unset all values for a css class and came across this page: Reset/remove CSS styles for element only
It tells us that we can do something like this to achieve what you want:
#menu, #menu th, #menu td {
all: unset;
color: red;
}
table, th, td {
border: 1px solid black;
}
Notice how I added the all: unset; and removed the border: none;
This should reset all the styles for elements with that id, but make sure to put your other styles AFTER the all: unset, or else it will unset the styles you just wrote. Hope this helps!
Maybe using classes instead of id's.
If you use a class you can apply a css rule to all elements that have It
So for example to your table you can use
.custum-table
The prevoius class Will apply css styles to all elements
And finally if you wanna apply another css rule you can add another class to your element in this way
Another html file
.custom-table__no--effect
Previous class with BEM Will apply css styles to only one element for example table element
I'm not well versed in CSS, but I understand the basic idea of specificity (or so I think). Recently I was trying to override the table CSS of Bootstrap 3, which was defined for each cell like so (this is a partial bit, the part that was effective on the inspected element):
.table > tbody > tr.danger > td, .table > tfoot > tr.danger > td {
background-color: #ddd;
}
I was trying to override the background color of the entire row that contained that cell, with this:
table#results > tbody > tr.highlighted {
background-color: #ffd15b;
}
Which, as I understand it, has higher specificity due to the ID. However it wasn't working at all, until I introduced the child td in my CSS:
table#results > tbody > tr.highlighted > td {
background-color: #ffd15b;
}
Why didn't my first attempt work? I tried in both Safari and Chrome (latest versions)
Your problem is not CSS specificity, but merely the background of the cell ( <td> ) hiding the background of the row (<tr>) behind it.
Try adding border-collapse property to the parent table like below
table#results { border-collapse: collapse;}
After Google-ing and stackoverflow-ing, I still haven't been able to solve this one:
I have a table with about a dozen rows. One of the rows looks like this:
<tr class="rvw-product-total">
<td colspan="2"></td>
<td>Total:</td>
<td>$180.67</td>
</tr>
The last two TDs in this row (Total and $180.67) should have a green background-color and bold text.
So I can get this accomplished in CSS/LESS like so:
tr[class="rvw-product-total"]:last-child td, tr[class="rvw-product-total"]:nth-child(n+2) td {
font-weight: bold;
background-color: #DFF0D8;
}
That makes the background-color of the entire row green.
Then I've tried explicitly setting the background-color of the first TD to white, like so:
tr[class="rvw-product-total"]:first-child td {
background-color: #fff;
}
But the entire row still remains the green background-color, and I'm just curious what I'm doing wrong here?
Here's a quick demonstration on jsfiddle: http://jsfiddle.net/acegyver/EYVvc/2/
The first selector should be:
table.prod-rvw-tbl tr[class="rvw-product-total"] td:last-child,
And the second selector should be:
table.prod-rvw-tbl tr[class="rvw-product-total"] td:nth-child(n + 2)
Fiddle
You are should move :first-child on your last selector to td.
table.prod-rvw-tbl tr[class="rvw-product-total"] td:first-child {
background-color: #fff;
}
Btw, your selectors are too complex. It's better for performance to reduce it.
If you are just having .rvw-product-total class on <tr>s of this table, than it's sufficient to put the following selector:
.rvw-product-total td:first-child {}
I turned the selectors and overwrite the :first-child than using :last-child because it's better supported.
I also included the shorthand property background instead of background-color.
That should work for you: http://jsfiddle.net/acegyver/EYVvc/2/
I've spent 45min looking on how to remove the background color change on row hover.
See Fiddle: http://jsfiddle.net/BJrnC/1/
Just in case I'm not clear. When you hover a row in the tbody of a table using bootstrap, the background goes to grey. The problem is that I really like the layout they have, but I just don't like that.
How can I disable it?
Thanks.
You can add the following on your stylesheet to overwrite that feature:
.table tbody tr:hover td, .table tbody tr:hover th {
background-color: transparent;
}
Demo: http://jsfiddle.net/BJrnC/2/
Note: Noticed that I'm still getting upvoted for this answer. The twitter bootstrap now does this by default. If you want to add hover effects to a table simply add the .table-hover hover class to the body of your table, otherwise just omit it and it should not have any effects when hovered. This only applies to the latest version of the bootstrap.
The Blueprint CSS framework makes all table rows of alternating colors by default. How to disable this behaviour for one table?
I tried to use Chrome Developer Tools to see all the styles Chrome uses for a defined table, but did not find the style which would set the colors for rows. I also searched the Internet and did not find a solution. It's like magic...
Anyone can help me out?
You need a more specific selector to override... BP is pretty general though so that shouldnt be an issue for example:
table.no-zebra tbody tr:nth-child(even) td,
table.no-zebra tbody tr.even td {
background: transparent;
}
you can replace transparent with whatever color to make all rows a solid color.
I would just do override in my own css file
tbody tr:nth-child(even) td, tbody tr.even td {background:none;}
This is what I put into the top of my CSS file to disable Blueprint's even table rows background color.
table tr:nth-child(even) td {
background: transparent;
}
Possibly search for and remove (From screen.css)
tbody tr:nth-child(even) td, tbody tr.even td {background:#e5ecf9;}