Not sure how to go about this piece of code (CSS):
td {
border-bottom: solid 2px lightgray;
}
(featured in the jsfiddle below), to not function but only for the first button click. The reason behind this is because then there would be 2 bottom borders.
http://jsfiddle.net/julianbuscema/yqh2rqh0/38/
Pretty much on the second button click I want the code to be activated
In addition to the style you already have in your question, add :last-child to tr and then style the last td based on that.
tr:last-child td {
border: none!important;
}
Here's a fiddle: http://jsfiddle.net/8a0m19z7/
Related
We have a generic css style defined like this:
.table-container table tr:hover td {
background-color: #eaeaea;
}
This is used for all tables across application. However, I have to override it for a particular table on specific rows. I am attaching new css style at each <tr class=‘edited’> with this definition:
.edited {
background-color: #f8cbad;
}
But, when hovering over the row, it is using generic hover style, and I am not able to override it.
Can you please suggest how to override it so that I see same background color as edited style even on hovering the row?
I tried with following and tweaking, but didn’t work.
.table-container table tr:hover .edited td {
background-color: #eaeaea;
}
Ok, I have figured out after some trial. Answering to help others:
Defining hover for the specific style class did the trick:
.edited {
background-color: #f8cbad;
}
.edited:hover {
background-color: #f8cbad !important;
}
got styled css table but for some reason the row styling is being cut off, css inspector is showing any obvious error. attached is the css and table
example of issue
see codepen
Using background on td Instead of tr will solve your problem.
table.striped tr:nth-child(even) td {
background-color: #fff;
}
table.striped tr:nth-child(odd) td{
background-color: #efefef;
}
Updated Codepen
I have a table with a lot of table rows. Every table row have a 2px solid grey border.
My problem is that the table is a link and to show that to the user I will make the border black when hovering. But adding :hover to tr does only apply to the hovered tr but I want all tr to get a black border.
Is that possible?
Use
tbody:hover tr{
border:2px solid grey;
}
to restrict the hover to only the rows in the body. See this example fiddle
Look at this fiddle: http://jsfiddle.net/czz2ejfw/1
Style for my table:
td {
color: #669;
}
tbody tr:hover {
color: red;
}
The text color should be red when we hover. In fact, if you look at developer tools you see that red should be applied. But incredibly, it displays as #669. WTH?
This is consistent across Firefox, Chrome, Safari, and Opera.
It isn't more specific. It matches a different element.
td { color: #669; } overrides the default stylesheet (which is probably something like td { color: inherit; }) because author stylesheets override browser stylesheets.
If you want to match the td when the tr is hovered, then you need to mention the td in the selector (e.g. with a descendant combinator).
tbody tr:hover td {}
<tr> is getting the color:red; but there is nothing there to be styled red.
Instead you would need to do this, which applies red to all <td> cells that are children of the parent <tr>:
tbody tr:hover {
background-color: yellow;
}
tbody tr:hover td {
color: red;
}
JS Fiddle Demo
As actually already said in a comment, the td is a child of the tr, so although the background of the tr changes, if you can't see it anywhere because none of the td's are transparent you won't get anywhere. The correct solution thus is to either make the td's transparent (default) and instead style the tr's always, or use tr:hover td{} to override the styles of the td instead of styling the tr.
Update that part of your CSS to this and it will work:
tbody tr:hover {
background-color: yellow;
}
tbody tr:hover td{
color: red;
}
Red is higher priority in your version because it is specific for td the tbody tr is not that specific
In my CSS, with Mozilla even if I put visibility: hidden on a <td> tag the background color is shown.
Open this jsfiddle. With Chrome it is okay, but with not with Mozilla.
Actually Firefox handles this situation properly to my mind. You set background color of tr but make invisible td. tr should still be visible. So it is.
Instead try this CSS:
table td,
table th {
background-color: beige;
}
Demo: http://jsfiddle.net/mTTzb/3/
You can use display: none; instead if it matches your need. Keep in mind however that contrary to visibility: hidden;, the place occupied by your content will be freed for next displayed block.
You can also apply the background style on td and th instead of tr:
th,td {
border: 1px black solid;
background-color: beige;
}
See result here:
http://jsfiddle.net/mTTzb/5/
Try changing the visibility:hidden; attribute for display:none;
The problem is in the following CSS rule:
table tr {
background-color: beige;
}
The rule states that every row on any table has a background color.
When you set the cell's visibility to hidden, although the cell remains hidden, it's space remains within the row.
That's why you can see color in the space where the cell is.
You can either set the display:none so the cell space isn't used or you can set the background color on the cells instead of rows:
table tr td,th {
background-color: beige;
}