I use bootstrap and datatable.
I created this class.
.nonCompliant{
background: #de5d5d;
}
It put on the tr of some row of the table.
Would like to put another color when nonCompliant class is displayed and hover event
tried
table#samplesTestsTable.dataTable tbody tr:hover > .nonCompliant{
background: #c11f1f;
}
and
tr:hover > .nonCompliant{
background: #c11f1f;
}
without good result.
Edit code of the row
<tr role="row" class="nonCompliant even"><td data-id="19475A" class="sorting_1" tabindex="0">190475A</td><td>2019-04-23</td></tr>
If the .nonCompliant class is modifying the tr itself, then
.nonCompliant:hover {
background: #c11f1f;
}
should work. Otherwise if .nonCompliant is on a direct child element of the tr, like a td,
tr:hover .nonCompliant {
background: #c11f1f;
}
or the child selector you're already using.
If you are applying the class directly to the hr tag, then you can just do this:
.someclass:hover{
background-color: yellow;
}
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td class="someclass">
Hello2
</td>
<td>Lastname</th>
<td>Age</th>
</tr>
</table>
else, if its a direct child you could to this:
tr:hover .nonCompliant {
background-color: yellow;
}
Related
bootstrap-next-table` and I am using this table in my project around different places, and I have to override a CSS class in this and I have given my own value.
Now the problem that I am currently facing, one component needs default CSS class. I have to override this class:
.table > thead {
display: none !important;
}
Now in one file I need this:
.table > thead {
display: block;
}
How can I achieve this?
Just use a selector with higher specificity and use !important in your style declaration. Here's a plain HTML/CSS snippet that you can adapt to Raect's className attribute syntax.
.table > thead {
display: none !important;
}
.table > thead.box {
display: block !important;
}
<table class="table">
<thead>
<tr>
<th>First</th>
<th>Second</th>
</tr>
</thead>
</table>
<table class="table">
<thead class="box">
<tr>
<th>Third</th>
<th>Fourth</th>
</tr>
</thead>
</table>
I'm facing a problem with css about changing a class inside an hover element.
I have a simple table with a "text-success" class in a column, and also, I have an css on "tr:hover" to change the table row "background-color". The problem is the "text-success" is not well shown over the "background-color" hover, so I would like to chnage the color "text-success" only when the row is hovered. It is possible to do by CSS only?
Here the example
<div class="d-flex">
<table style="width:100%;" class="table tablaDashboard">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Mark</th>
</tr>
</thead>
<tbody>
{% for user in users %}
<tr>
<td> {{user['name']}} </td>
<td> {{user['age']}} </td>
<td class="text-success"> {{user['mark']}} </td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<style>
.tablaDashboard tbody tr:hover { background:blue; }
.tablaDashboard tbody tr:hover .text-success{ color:OTHER-COLOR; } /*Doesn't work*/
.tablaDashboard tbody tr:hover > .text-success{ color:OTHER-COLOR; } /*Doesn't work*/
.tablaDashboard tbody tr:hover td .text-success{ color:OTHER-COLOR; } /*Doesn't work*/
.tablaDashboard tbody tr:hover td > .text-success{ color:OTHER-COLOR; } /*Doesn't work*/
</style>
Thanks a lot!!
I don't understund your code run with :
.tablaDashboard tbody tr:hover { background:blue; }
.tablaDashboard tbody tr:hover .text-success{ color:#ffffff; }
see it on CodePen :
https://codepen.io/alexis-g/pen/OJMjPJq
I'm trying to change the border-top color of Bootstrap table.
HTML
<table class="table">
<thead>
<tr>
<td>Parent</td>
</tr>
</thead>
<tbody>
<tr>
<td>Mama</td>
</tr>
</tbody>
</table>
CSS I've tried
table > tr{
border-top: black;
}
table > tr > td{
border: 1px solid red !important;
}
FIDDLE
https://jsfiddle.net/o9b17p2d/43/
As seen in the fiddle.
I'd like to change the color of the line between Parent & Mama.
You have placed a wrong code.Try this
.table td, .table th{
border-color: black;
}
Try this in your css.
thead{
border-bottom: 2px solid #6c5ce7;
}
https://jsfiddle.net/o9b17p2d/45/
I hope it will help
You have used a wrong selector in table > tr > td { and table > tr {
because thead is direct children for table and no tr.
so, change like this:
table > thead > tr > td {
border-bottom: 1px solid red !important;
}
table > thead > tr > td {
border-bottom: 1px solid red !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<table class="table">
<thead>
<tr>
<td>Parent</td>
</tr>
</thead>
<tbody>
<tr>
<td>Mama</td>
</tr>
</tbody>
</table>
So that you dont effect all other tables in your page/site.
The easiest way to do this - is to give the element an id, and then target it in CSS using the id.
#no-top-border-td {
border-top: none
}
<td id="no-top-border-td">Mama</td>
or you could add that as a style to the actual element
<td style="border-top: none" />
both of these have a high priority when the CSS is applied.
You can also use border-bottom property for row in thead.Add this code in css
.table thead tr td{
border-bottom:1px solid red;
}
Say I have two classes row and altRow. What is the best practice when setting the backround-color of table rows? I only ask this because I was told that I shouldn't set such properties on the <tr> element. Thanks!!
You were told right, browsers generally don't deal ok with background set on tr elements.
however, you can set the classe to <tr> elements:
<tr class="row">
<td></td>
<td></td>
</tr>
<tr class="altRow">
<td></td>
<td></td>
</tr>
and then in css, use cascading face of CSS :)
.row td { background: yellow; }
.altRow td { background: blue; }
If you're looking for alternating table rows, CSS3 also allows you to do this:
tr:nth-child(odd) { background-color: #ddd; }
tr:nth-child(even) { background-color: #eee; }
With CCS3, you no longer need alternating class names in your HTML
Is it possible to style alternate table rows without defining classes on alternate <tr> tags?
With the following table, can CSS define alternate row styles WITHOUT having to give the alternate rows the class "row1/row2"? row1 can be default, so row2 is the issue.
<style>
.altTable td { }
.altTable .row2 td { background-color: #EEE; }
</style>
<table class="altTable">
<thead><tr><td></td></tr></thead>
<tbody>
<tr><td></td></tr>
<tr class="row2"><td></td></tr>
<tr><td></td></tr>
<tr class="row2"><td></td></tr>
</tbody>
</table>
tr:nth-child(even) { background: #FFF; }
tr:nth-child(odd) { background: #EEE; }
Does not work in IE, but it's a purely presentational thing, the content will work fine anyway, so I don't think it's a huge issue -- depending on the % of regular IE users on your site.
Yes! You can do it with pure CSS and no classes on browsers that support the "+" selector of CSS:
.altTable tr td,
.altTable tr+tr+tr td,
.altTable tr+tr+tr+tr+tr td { background-color: #EEE; }
.altTable tr+tr td,
.altTable tr+tr+tr+tr td,
.altTable tr+tr+tr+tr+tr+tr td{ background-color: #fff; }
Probably not the best approach, but doable.
If you don't mind a little Javascript, jQuery gives it to you much concisely:
$('.altTable tr:odd').addClass('odd');
Give a class of row2 on tbody and then style your alternate rows with class row1. Other rows will inherit the class row2 from the tbody.
<style>
.row1 { color: red }
.row2 { color: blue }
</style>
<table class="altTable">
<thead><tr><td></td></tr></thead>
<tbody class="row2">
<tr class="row1"><td>row 1</td></tr>
<tr><td>row 2</td></tr>
<tr class="row1"><td>row 1</td></tr>
<tr><td>row 2</td></tr>
</tbody>
</table>