I wanted to highlight the table row on hover. So I've used the following CSS rule,
.my-table tbody tr:hover{
background-color: #BFC0C2;
}
It worked well alone. Later I've included the CSS rule to make the different background color for odd and even rows of the table,
.my-table tbody tr:nth-child(odd){
background: #FFFFFF;
}
.my-table tbody tr:nth-child(even){
background: #f2f2f3;
}
Now the odd and even rows are having differnt background color But on hover the row is not getting highlighted. Can't I use both of them together? Here is the plunker.
This is a specificity / cascade issue.
Either re-order the CSS
td {
padding: 10px;
border: 1px solid grey;
}
.table tbody tr:nth-child(odd) {
background: #FF0000;
}
.table tbody tr:nth-child(even) {
background: green;
}
.table tbody tr:hover {
background: grey;
}
<table class="table">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
OR increase the specifity of the hover in the same way
td {
padding: 10px;
border: 1px solid grey;
}
.table tbody tr:nth-child(n):hover {
background-color: #BFC0C2;
}
.table tbody tr:nth-child(odd) {
background: #FF0000;
}
.table tbody tr:nth-child(even) {
background: green;
}
<table class="table">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
You can also change td's background
.my-table tbody tr:hover td {
background-color: #BFC0C2;
}
.my-table tbody tr:nth-child(odd) {
background: #FFFFFF;
}
.my-table tbody tr:nth-child(even) {
background: #f2f2f3;
}
its just the matter of specificity of the selector, increase it my any mean will solve the problem example
.my-table tbody tr:hover {
background-color: #BFC0C2 !important;
}
Examining in the browser you can see that both selectors apply, but one is overridden:
Just place it earlier in code or add !important and it'll work fine.
Related
How can I color the entire thead row without these borders?
<thead bgcolor="#d6f5d6">
<tr className="ha">
<th>Evento</th>
<th>Valor</th>
</tr>
</thead>
table thead tr,
table thead tr th{
background: #d6f5d6;
border: 1px solid #d6f5d6;
background-clip: content-box;
}
table thead tr th{
border: none;
background-clip: content-box;
}
You want the border-spacing property.
table {
border-spacing: 0;
}
table thead tr,
table thead tr th{
background: #d6f5d6;
border: 1px solid #d6f5d6;
background-clip: content-box;
}
table thead tr th{
border: none;
background-clip: content-box;
}
<table>
<thead bgcolor="#d6f5d6">
<tr className="ha">
<th>Evento</th>
<th>Valor</th>
</tr>
</thead>
<tbody>
<tr>
<td>one</td>
<td>two</td>
</tr>
<tr>
<td>three</td>
<td>four</td>
</tr>
</tbody>
</table>
Tested in Firefox 91.0.2 (64-bit) Windows 7.
The task: For table tr:hover, show the border-top and border-bottom in a different color so that the row is visually highlighted.
The problem: With tr:hover only the color of the border-bottom is changed.
I didn't find a solution in the already existing questions, because in these mostly no td background-color is used. Since td background-color is used in my case, the trick with a border transparency does not solve the problem. Also cellspacing does not solve the problem.
The problem seems to be that the browser first globally processes all border-top and then all border-bottom. The tr:hover border-top is overwritten by the normal border-bottom. Also an !important does not solve the problem.
The same problem exists with col border-right and border-left. However, there is no :hover active, so this problem can be solved more easily and is not a topic here. It is only included to show the problem of overwriting CSS rules.
It seems that not every CSS rule is processed individually, but they are collected and processed globally in the following order:
border-top
border-right
border-bottom
border-left
When both overlap, like in a table, the following overwrites the preceding, even with :hover! This is the problem.
So if you have a :hover border-top and also a normal border-bottom, then the :hover border-top will be overwritten by the normal border-bottom. crazy.
https://jsfiddle.net/8fh3nao6/5/
table {
border-collapse: collapse;
text-align: right;
cursor: default;
}
th {
background: #ccc;
text-align: center;
}
.col0 {
background: #ddd;
}
col {
border-right: 1px solid #fff;
border-left: 1px solid #fff;
}
.col2 {
border-right: 1px solid #000;
border-left: 1px solid #000;
}
tr {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
}
tr:hover {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
.c0 {
background: #fff;
}
.c1 {
background: #f8a;
}
.c2 {
background: #b3c;
}
.c3 {
background: #aa6;
}
.c4 {
background: #cf9;
}
.c5 {
background: #9dd;
}
.c6 {
background: #0f8;
}
.c7 {
background: #44f;
}
.c8 {
background: #88b;
}
<table>
<colgroup>
<col class="col0">
<col class="col1">
<col class="col2">
<col class="col3">
</colgroup>
<thead>
<tr>
<th>ID</th>
<th>COL 1</th>
<th>COL 2</th>
<th>COL 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td class="c0"></td>
<td class="c0"></td>
<td class="c5">8,36</td>
</tr>
<tr>
<td>2</td>
<td class="c1">95,35</td>
<td class="c3">36,25</td>
<td class="c6">45,38</td>
</tr>
<tr>
<td>3</td>
<td class="c2">37,25</td>
<td class="c4">15,24</td>
<td class="c8">41,25</td>
</tr>
<tr>
<td>4</td>
<td class="c7">97,64</td>
<td class="c3">28,73</td>
<td class="c0">36,94</td>
</tr>
</tbody>
</table>
Use tr:hover td instead of tr:hover. Borders are applied to cells not rows.
I recommend you do this if you're applying background color as well, style the cells in the row, not the row itself.
I found out that you can't style thead, tr, or tbody. What I want to do is have a 2px white border between the cells and doesn't over lap and give the table a border radius where the table cells don't break the radius.
body {
background-color: blue;
color: white;
}
table {
border-collapse: separate !important;
width: 100%;
border: 2px solid white;
border-radius: 12px !important;
}
th {
padding : 12px;
border: 2px solid white;
}
td {
padding : 12px;
border: 2px solid white;
}
<table id="user-table">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>password</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Kyle</td>
<td>bb5dc8842ca31d4603d6aa11448d1654</td>
</tr>
<tr>
<td>2</td>
<td>Brit</td>
<td>953f893eaed2098219f31f68947be559</td>
</tr>
<tr>
<td>3</td>
<td>Trevor</td>
<td>bb5dc8842ca31d4603d6aa11448d1654</td>
</tr>
<tr>
<td>4</td>
<td>Justin</td>
<td>953f893eaed2098219f31f68947be559</td>
</tr>
<tr>
<td>5</td>
<td>Dave</td>
<td>953f893eaed2098219f31f68947be559</td>
</tr>
</tbody>
</table>
Is there a way of going about this?
Also I tried to add the reset I was using to the code and everything broke because I don't know how to add it before the css that runs in the code snippet example:
https://meyerweb.com/eric/tools/css/reset/reset.css
Its isn't quite true that you cant style th, tr, td elements in a table. You can see below how the background colour of th & tr is changed.
You can target cells in the corners through pseudo classes such as :first-child, :last-child and add individual border radius property.
In your sample code I've used these properties to mention the borders.
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
body {
background-color: blue;
color: white;
}
table {
border-collapse: separate !important;
width: 100%;
border: 2px solid white;
border-radius: 12px !important;
}
th {
padding : 12px;
border: 2px solid white;
background: red;
}
th:first-child {
border-top-left-radius: 10px;
}
th:last-child {
border-top-right-radius: 10px;
}
td {
padding : 12px;
border: 2px solid white;
}
tr:nth-child(even) {
background: grey;
}
tr:last-child td:first-child {
border-bottom-left-radius: 10px;
}
tr:last-child td:last-child {
border-bottom-right-radius: 10px;
}
<table id="user-table">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>password</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Kyle</td>
<td>bb5dc8842ca31d4603d6aa11448d1654</td>
</tr>
<tr>
<td>2</td>
<td>Brit</td>
<td>953f893eaed2098219f31f68947be559</td>
</tr>
<tr>
<td>3</td>
<td>Trevor</td>
<td>bb5dc8842ca31d4603d6aa11448d1654</td>
</tr>
<tr>
<td>4</td>
<td>Justin</td>
<td>953f893eaed2098219f31f68947be559</td>
</tr>
<tr>
<td>5</td>
<td>Dave</td>
<td>953f893eaed2098219f31f68947be559</td>
</tr>
</tbody>
</table>
https://jsfiddle.net/v2tgjLjv/
anything wrong with this selector?
tr:odd {
background: green;
}
tr:even {
background: lightgreen;
}
You should use nth-child:
tr:nth-child(odd) {
background: green;
}
tr:nth-child(even) {
background: lightgreen;
}
:odd and :even are jQuery pseudo element selector not of css.
tr:nth-child(even) {background: red}
tr:nth-child(odd) {background: green}
<table>
<tr class="d0">
<td>one</td>
</tr>
<tr class="d1">
<td>two</td>
</tr>
<tr class="d1">
<td>two</td>
</tr>
<tr class="d1">
<td>two</td>
</tr>
</table>
tr:nth-child(odd) {
background-color: green;
}
tr:nth-child(even) {
background-color: lightgreen;
}
<table>
<tr><td>1</td></tr>
<tr><td>1</td></tr>
<tr><td>1</td></tr>
<tr><td>1</td></tr>
<tr><td>1</td></tr>
</table>
Use all the tags <table> and <td>. Also use :nth-child(odd) and :nth-child(even) instead of :odd and :even Here is my JSFiddle: https://jsfiddle.net/v2tgjLjv/9/
CSS
table tr {border-bottom:1px solid #008999}
HTML
<table width="100%" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th scope="col">one</th>
<th scope="col">two</th>
<th scope="col">three</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Hello</th>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
Add:
table
{
border-collapse: collapse;
}
Otherwise tr creates no single block.
Simple example:
table
{
border: 5px solid #900;
background: #fff;
}
tr
{
border: 5px solid #090;
}
td
{
background: #ccc;
padding: 5px 0;
}
table + table
{
border-collapse: collapse;
}
<table>
<tr>
<td>def</td>
<td>ault</td>
</tr>
</table>
<table>
<tr>
<td>coll</td>
<td>apse</td>
</tr>
</table>
Try giving
table tr th {border-bottom:1px solid #008999}
Then you can use
table { border-collapse: collapse; }
table tr {border-bottom:1px solid #008999; }
See The collapsing border model
tr by definition wont take border styles. You need to apply it to the td's within it:
table tr td {border-bottom:1px solid #008999}