I have two styles, one which is at element level 'td' and another which is at class level '.specialTable td'. And I've run into some problems as the class level style is inheriting all the 'td' style properties if I have not specified them again.
I have a CSS style
td
{
background-color:black;
}
and then I have
.specialTable tr:nth-child(even) {
background-color: white;
}
and
.specialTable td
{
background-color:none;
}
What happens here is that even though I've asked.specialTable td to have no background, it inherits the black background from element style 'td' and this causes my element style 'tr' to be blocked out, because cells are on top of rows.
I am trying to set alternating row style to my table. Please help me with how I can stop the original 'td' element style from getting in the way.
Here is the fiddle:
http://jsfiddle.net/PIyer/phADs/1/
you have a type in your css, but im not sure if that is the problem
specialTable tr:nth-child(even) {
background-color: white;
}
should be
.specialTable tr:nth-child(even) {
background-color: white;
}
aslso background-color:none is not valid css , maybee background-color:transparent
none is not a valid property for the background color. Try this:
.specialTable tr {
background-color: black;
}
.specialTable tr:nth-child(even) {
background-color: white;
}
Or you might use in your example just
.specialTable td
{
background-color: transparent;
}
This should let the white shine through.
You could simplify things, by using basic CSS overriding.
Let's say you have this:
<table class="specialTable">
<tr>
<td>This is an odd row</td>
</tr>
<tr>
<td>This is an even row</td>
</tr>
<tr>
<td>This is an odd row</td>
</tr>
<tr>
<td>This is an even row</td>
</tr>
</table>
And your default <td> style is this:
td {
background-color:black;
color: #FFF;
}
To make alternating (zebra) styling to .specialTable, you can simply do this:
.specialTable tr:nth-child(even) td {
background-color: blue;
}
This will override the original CSS defintion for <td> for all <td> tags within an even <tr> tag.
Check out a working example here: http://jsfiddle.net/rh5vV/
It's important to note that the nth-child sudo selector does not work in versions of IE8 and lower, so you may want to apply a class of .even to your even <tr> tags.
Try this out
.specialTable tr td {
background-color:transparent;
}
using background none is incorrect, use transparent instead
http://jsfiddle.net/RBY2v/1/
You can use background-color:transparent; or depending on background:none;:
.specialTable td {
background-color:transparent;
}
Related
https://getbootstrap.com/docs/5.1/content/tables/#overview
How can I override and modify the bootstrap 5 table border below the headline?
I want to achieve this with simple CSS override, not using SASS.
I tried the following, which did not have any effect:
.table > thead > tr > th {
border-bottom-color: red !important;
}
Playing around with it a bit, for some reason, I was only able to override the existing style by specifying the whole border-bottom property, with width, style, and color, with the width a minimum of 2px. I was also able to get the selector simplified, and remove the !important.
.table thead th {
border-bottom: 2px solid red;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Heretic</td>
<td>Monkey</td>
<td>Heretic Monkey</td>
</tr>
</tbody>
</table>
Take a look at https://github.com/twbs/bootstrap/issues/35342
Here is the CSS that can remove the border
.table > :not(:first-child) {
border-top: 0;
}
Then you can apply your own styling
There are couple of solutions you can try.
Solution 1.
.table > :not(:first-child) {
border-top: 0;
}
Take a look at this github issue
Solution 2.
other one is add table-borderless class to the table as given below
<table class="table table-dark table-borderless">
...
</table>
then you can give your custom border classes to that table.
e.g.
#myTable table,
thead,
tbody,
tr {
border-bottom: 1px solid black !important;
}
actually in my case 1st solutions didn't worked but by using 2nd one I am able to apply my custom border css.
Hope this will also useful for someone.
Okay, so this is what I'm trying to achieve here.
I have this board that I'm trying to style,
and when I hover over a <tr>, I want to give color:#fff to the <a> that's inside of the <tr> I'm hovering on.
It doesn't work if I give
tr:hover {color:#fff}
Is there a way to achieve this?
I can't seem to find the right selector.
And here is the site I'm working on http://lifeto.cafe24.com/xe/request.
Try this,
tr {
background: #eee;
}
tr:hover {
background: #333;
}
tr:hover a {
color: #fff;
}
<table>
<tr>
<td>Link 1
</td>
<td>Link 2
</td>
</tr>
</table>
I have this table with the following CSS formatting:
<table cellspacing="2">
<tbody>
<tr>
<th>Name</th>
<th>Area</th>
</tr>
<tr>
<td>${it.conference}</td>
<td>${it.accepted}</td>
</tr>
</tbody>
</table>
And CSS:
table {
padding-left: 10px;
width:90%;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
text-align:left;
}
th, td {
padding:5px 10px;
}
th {
color:#666666;
border-top:2px solid #b7ddf2;
background-color:#ebf4fb;
}
How can i apply individual css modifications for each line (for example, I would like to change the color of 'Name', without messing up with the other lines formatting, which means, only modify that one. Is that possible to do?
Are you looking for something similar to the nth-child CSS pseudo-class?
If you want a more fine grain control over each individual one you might want to consider applying classes to them and styling them differently.
Edit: Here are a few examples of nth-child.
With a CSS only method you'll need to add some class to the line you would like to style, like this:
<table cellspacing="2">
<tbody><tr>
<th class="color1">Name</th>
<th>Area</th>
</tr>
<td>${it.conference}</td>
<td>${it.accepted}</td>
</tr></tbody>
</table>
and then style it:
.color1 {
background-color: (somecolor);
}
To style "Even" & "Odd" rows then use CSS3
like:
tr:nth-child(odd){
background:#999;}
tr:nth-child(even){
background:#f5f5f5;}
If you can get away without support for IE 7 and 8, you can do...
th:nth-of-type(1) {
color: #c00;
}
Otherwise, add a class such as th class="whatever" and then...
th.whatever {
color: #c00;
}
See a live demo:
http://jsfiddle.net/GFPgB/
If you want to apply CSS style based on the content of the element, that is not possible with CSS. If on the other hand you want to apply CSS styles based on their position, you can use the :nth-child(N) pseudo classes. For example
th:nth-child(1) /*for name*/
{
color: blue;
}
th:nth-child(2) /*for area*/
{
color: red;
}
apply a class to whatever element you want, and CSS style it. http://jsfiddle.net/robx/wzXAJ/
IE: apply <th class="name">Name</th>.
I know this is an old answer, but I made a fun example in Jquery, and maybe it will help somebody with their question.
JSFIDDLE
It'll get all <p> elements from the document and will loop through them, as jquery does that, it will add a CSS style to every <p> element on the page.
If I am targeting a specific row, say the first one in a table, and want to change font color, I can do this
.mytable tr:first th {
color: red
}
But how do I add a hover property to the same row? This won't work, would it?
.mytable tr:first:hover th {
color: green
}
Can you put just the first row in a thead container?
.mytable thead:hover {
color: green
}
<table class="mytable">
<thead>
<tr><th>hello</th></tr>
</thead>
<tr><td>goodby</td></tr>
</table>
What about
.mytable tr:first th:hover {
color: green
}
?
Surely you use first-child and not just first? Then apply the hover to the first-child. You don't need to specify th as it will propogate through anyway.
Check this DEMO
.mytable tr:first-child { color: red; }
.mytable tr:first-child:hover { color: green; }
.mytable tr { color:blue; }
However if you are looking to specify any row, other than the first-child, you might have to look at some javascript, or maybe the use of nth-child but that would rule out < IE8 compatibility.
How about this:
.hoverstate:hover {
color: green;
}
with HTML like this:
<table>
<tr><td>1</td><td>2</td></tr>
<tr class="hoverstate"><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
</table>
?
I want to give good background effect to rows using this css
tr:hover td{background-color:#ddd; }
imagine a table inside a table,
naturally all td's inside, also effected by this css. How can I prevent?
<table
<tr
<td -->color change is good
<tr
<td
<table
<tr
<td --> color change is bad
I tried using
form>table>tr:hover td still same
form>table>tr:hover>td not working at all
thanks for help
Use this to style only your outer tds on hover.
form > table > tbody > tr:hover > td {
background-color: #ddd;
}
Notice the tbody selector. See this answer for why it's needed.
Use a second selector:
tr:hover table td { background-color: black; } /*change to default*/