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*/
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'm not well experienced in CSS, could somebody tell me how could I override styling so that a cell called "Existing Price Breaks" retains it's left border? Similarly the one below would do the same, splitting the content. But the rest of the header should stay without them as it is now.
Here's the fiddle: http://jsfiddle.net/kacpr/YkL5j/2/
That's the part I would like to override on the 'cell' level:
.table > thead > tr > th, .table > thead > tr > td {
border: 0;
}
It doesn't seem the proper way of using the CSS selectors, but here is a possible solution (there's no class for the cell, so we use ":nth-child()" as example:
.table > thead > tr > td:nth-child(4) {
border-left: 1px solid #ff0000;
}
http://jsfiddle.net/YkL5j/3/
If you need backward browser compatibility, then you may need to assign a class to the selected cell: .existingPriceBreaks {}
A better way for using CSS selectors could be:
.table tr td:nth-child(4) {}
.table tr td.existingPriceBreaks {}
...except you plan to use nested tables for some reason...
You could use a class e.g. leftBordered to override the common border definitions like:
/* in html */
<tr>
<td>Currency</td>
<td style="font-weight: normal;">EUR</td>
<td></td>
<td colspan="2" class="leftBordered">Existing price breaks</td>
<td colspan="3">New price breaks</td>
</tr>
/* must be applied to all td-fields, that need to be changed */
/* in css */
table > thead > tr > td.leftBordered {
border-left: 1px solid #ccc;
}
see fiddle for working example here: http://jsfiddle.net/YkL5j/5/
I have a simple table:
<table class="table table-condensed table-striped">
<tr>
<td>First Name</td>
<td>Last Name</td>
</tr>
<tr>
<td>teste1</td>
<td>teste2</td>
</tr>
</table>
With a custom CSS:
tr:first-child {
color: #696969;
background-color: black; !important;
}
The color is applied, but the background-color, isn't. Why? With last-child the background-color works. Thanks.
Update: If I remove the table-striped it works. But I need to keep it.
Update2: table-striped Bootstrap CSS:
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
background-color: #f9f9f9;
}
Found it, it's selector problem,
The selector B3 using is more specific, now, place your css as sequence as below.
Example:
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/custom.css">
and add this css in the custom.css
.table-striped > tbody > tr:first-child > td,
.table-striped > tbody > tr:first-child > th {
color: #696969;
background-color:#000;
}
I've tested and the result is what you need.
http://jsfiddle.net/TAp7T/1/
Change
background-color: black; !important;
To
background-color: black !important;
you don't need important just add more classes or an id to the selector to make it work like this and apply your style to the td.
table.table-condensed.table.table-striped tr:first-child td{
color: #696969;
background-color: black;
}
fiddle here
Irrespective of !important, the CSS style gets applied to first-child or last-child. See in JSFiddle first for first-child and JSFiddle last for last-child. Probably, you have shown only a part of your project, so we can only analyze based on the info you have given. The code really applies the background-color to any child.
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;
}