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/
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 have this two styles in CSS, both in an external linked css file, and applied to the same table, with class myTable (it's a simplified version of a larger problem):
.myTable th
{
background-color: gray;
}
.myTable tr:nth-child(odd)
{
background-color: blue;
}
When I run the page, the header is gray, but why? What I want to know is why the first rule is overwriting the second. If I understood well specificity calculations (and obviously I didn't) the second rule is more specific (all calculators give me 0, 1, 2 in the second rule and 0, 1, 1 in the first one). Why then, the header is gray and not blue, if the second rule has more specificity???? Could someone help me understand this, please? Thank you very very much...
You forgot th or td:
.myTable tr:nth-child(odd) th,
.myTable tr:nth-child(odd) td {
background-color: blue;
}
Because you are applying for th in your first class, you need to use that here. The th is inside the tr, so whatever you put, th will be in front showing the grey colour.
CSS specificity does not apply in your situation.
Your CSS targets two different elements; th and tr.
You have to think about this from a layer perspective.
Because th's are contained in tr's then the background-color of the th will be displayed above the background-color of the tr.
Take this code for example:
<tr style="background-color: gray">
<th>Heading One</th>
<th style="background-color: red">Heading Two</th>
<th>Heading Three</th>
</tr>
The first and third th have a transparent background-color, so the background-color of the tr shows through them. The second th has a background-color defined so it shows as expected.
You can take a look at this jsfiddle to see it in action.
Your first rule is not overwriting the second rule.
The reason is that your header is grey is because it contains th elements, and you only specified background: grey for the th elements. (And a th is not the same as a tr).
If you want alternating column colors in your header also, then modify your code to address both the th and the td, like so:
.myTable th {
background-color: gray;
}
.myTable td:nth-child(odd),
.myTable th:nth-child(odd) {
background-color: blue;
}
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
I am new to CSS and am working on an intraweb application which will render in modern standard browsers (IE support is not necessary). I have spent much time looking for answers on this and other sites, only to find the answers "It's impossible because..." or "Do this hack instead...." but I just won't accept that.
Here's what I need:
A table with one header row and multiple body rows;
A solid border under the header row;
Vertical white space (padding? margin? spacing?) between the header row and first body row only;
Body rows being highlighted on mouse hover.
I couldn't get (2) to be visible until I styled the table border-collapse: collapse;. Fine. But (3) apparently only works with border-spacing, and only on <td> elements (not <tbody> or <tr>), which is anyway disabled by the collapse. Meanwhile, for some unknowable reason, margin's are not recognized for <thead>, <tr>, or <th> elements, but having padding-top on the first row of the body's <td>'s works, except it doesn't, because when I mouse over that first row, the whole margin-which-is-implemented-as-padding gets highlighted as well, which nauseates me.
I know having a few pixels of margin between a table's header and body is like a really out-of-left-field, why-would-anyone-ever-want-that thing to want, but what should I tell you? I'm no cheap date.
Please be as brutal and condescending as you can in pointing out my stupidity in understanding CSS, provided you also either 1) say how to do it without changing the markup (thereby preserving the separation of presentation from content CSS was evidently designed to encourage) or 2) agree with me that CSS is weird.
<head><style>
table {
border-collapse: collapse;
border-spacing: 0;
}
thead {
border-bottom: 4px solid #123456;
}
/*** something goes here ***/
tbody tr:hover {
background-color: #ABCDEF;
}
</style></head>
<body>
<table>
<thead>
<tr><th>Fruit</th><th>Color</th><th>Yummy?</th></tr>
</thead>
<tbody>
<tr><td>Apple</td><td>Green</td><td>Yes</td></tr>
<tr><td>Banana</td><td>Yellow</td><td>Yes</td></tr>
<tr><td>Pear</td><td>Brown</td><td>Yes</td></tr>
</tbody>
</table>
</body>
This would fix your problems without any hacks and ofcourse its completely possible. The updated code(only CSS changes) is shared below with explanations.
Problem 3 :
We can make use of the CSS selector :first-of-type(targeting only the first row) in succession with all the <td> under it and use attribute padding-top. Simple :-)
<tr> cannot have margin values by default. Again hacks are available(above mentioned answers) but I wouldn't go there as you don't want it.
And also since we have used padding, the hover effect would work perfectly on the entire row content. Hence getting the desired change without any markup changes.
Problem 2 :
We can remove the attribute border-collapse from table and instead apply the border on the <th>tags (let the border-spacing: 0 remain or the border would be discontinuous). Simple again :-)
Problem 1 and 4 are already covered. No markup changes as you wished. Here is the Fiddle
So the updated style code would look like
<head><style>
table {
border-spacing: 0;
}
thead tr th {
border-bottom: 4px solid #123456;
}
tbody tr:hover {
background-color: #ABCDEF;
}
/*** added ***/
tbody tr:first-of-type td {
padding-top: 10px;
}
</style></head>
Okay, in order:
1: A table with one header row and multiple body rows:
This is what the elements thead and tbody were designed for:
<table>
<thead>
<tr><th>heading one</th><th>Heading two</th></tr>
</thead>
<tbody>
<!--
all body table rows in here
-->
</tbody>
</table>
There's also tfoot (see references), which, if used, must be declared before the tbody element.
2: A solid border under the header row:
thead tr th {
border-bottom: 2px solid #000;
}
Select the th elements within the thead element, the tr selector is probably unnecessary here, and, while it does no harm, can be simplified to: thead th {/*...*/}.
3: Vertical white space (padding? margin? spacing?) between the header row and first body row only. padding, it seems, cannot be applied to the thead, tbody or tr elements, since they're, essentially (I suppose) 'non-visual', so it has to be defined on the td elements. This does, on hover, mean there's a disconcertingly large 'row' occupied by the first row during the :hover (see the next part).
tbody tr:first-child td {
padding-top: 1em;
}
4: Body rows being highlighted on mouse hover.
tbody tr:hover td {
background-color: #ffa;
}
While you can apply a :hover to the currently-hovered cell, and later siblings (with the general sibling ~ combinator) you can't apply a style to siblings that appear previously, so here we're styling the td elements in response to the :hover of their parent tr.
The reason that we have to style the td (rather than directly change the background-color of the tr is because td elements don't typically default to a transparent background, which means the changed/highlighted background-color is 'hidden' by the background-color of the td elements.
JS Fiddle demo.
References:
Table row-groups, thead, tbody, tfoot elements.
In order to apply margin to the first table row you need to make it display: block; first, as margin can only be applied to block elements (including inline-blocks)
But here is another solution using positioning:
<head><style>
table {
border-collapse: collapse;
border-spacing: 0;
position: relative; /* Add positioning */
margin-top: 40px; /* Add some margin */
}
thead {
border-bottom: 4px solid #123456;
}
/*** something goes here ***/
thead {
position: absolute; /* Position this element absolute */
top: -40px; /* And move it up */
}
tbody tr:hover {
background-color: #ABCDEF;
}
</style></head>
<body>
<table>
<thead>
<tr><th>Fruit</th><th>Color</th><th>Yummy?</th></tr>
</thead>
<tbody>
<tr><td>Apple</td><td>Green</td><td>Yes</td></tr>
<tr><td>Banana</td><td>Yellow</td><td>Yes</td></tr>
<tr><td>Pear</td><td>Brown</td><td>Yes</td></tr>
</tbody>
</table>
<p>Thats how its done!</p>
</body>
Basically we apply position: relative; to the table and position: absolute; to thead.
Now you can move the thead inside the table using top, bottom, left and right properties. We are going to move it up by 40px using top: -40px;
We do not apply position: absolute; to tbody, because if we do - this element will no longer 'strech the page' or in other words all the following elements will ignore its height. (try doing it and see what happens to the following block)
The only thing we got left - is to apply some margin-top to the table itself, moving it down (as we moved the thead up)
Yes, CSS can seem a bit weird from time to time, but this is mostly because we forget how some page elements are supposed to be handled (namely tables and their child elements)
What about adding an empty row at the beginning like
<tbody>
<tr><td> </td></tr>
<tr><td>blablablabla</td></tr>
And use this CSS
tbody tr:first-child td{
padding-top: 15px;
}
tbody tr:first-child:hover{
background-color: transparent;
}
So the padding will be added to first row and first row won't highlight on mouse over? :)
All your 4 points are covered there-
First download metro ui css here http://metroui.org.ua/
Include its two css file 1. metro-bootstrap, 2.metro-bootstrap-responsive into your project.
Register that in BundleConfig.
bundles.Add(new StyleBundle("~/Content/css/metroUI").Include("~/Content/css/metro-bootstrap.css",
"~/Content/css/metro-bootstrap-responsive.css"));
Now use class "gr-items" for table
< table id="divAllActivities" class="gr-items">
<thead>
<tr><th><span>Comment</span></th></tr>
</thead>
<tbody>
<tr>
<td><span>OperationDateTime</span></td>
</tr>
<tr>
<td><span>OperationDateTime</span></td>
</tr>
</tbody>
Hope this is what you want.
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;}