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.
Related
there is a conflict with style borders in a table.
Tested in Firefox 91.0.2 (64 bit)
It is said that mainly the cell borders should be styled.
It is not that there is no solution by tricking. It is rather the case that there is a conflict.
There are complex hierarchies when styling the borders. The last one takes effect.
General:
table
thead, tbody, tfoot
tr, col
th, td
Special:
border-top, border-right
border-bottom, border-left
The General Hierarchy prevents column-borders from being styled if cell-borders are styled. Only tricks can solve this problem. !important does not solve the problem.
Likewise, row-borders cannot be styled if cell-borders are styled. This is very complex when styling with tr:hover. Correct would be styling with tr:hover td. But there is also a conflict.
There is a trick.
With border-top and border-bottom:
For this only the cell-border-top may be styled. Because these are overwritten by the row-border-bottom (see hierarchy above).
For border-left and border-right:
Only the cell-border-right may be styled for this purpose. Because these are overwritten by the column-border-left (see hierarchy above).
So it is possible to solve the problem with some tricks. However, I am not looking for a trick, but for a solution to the conflict.
In the example the following should work (and at this point don't work without tricks):
cells (th, td): border = 1px solid #fff
column 2 (.col2): border-left, border-right = 1px solid #000
row hover (tr:hover): border-top, border-bottom = 1px solid #000
table {
border-collapse: collapse;
text-align: right;
cursor: default;
}
th {
background: #ccc;
text-align: center;
}
th, td {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
}
.col0 {
background: #ddd;
}
.col2 {
border-right: 1px solid #000;
border-left: 1px solid #000;
}
tbody tr:hover td {
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">
<col class="col4">
</colgroup>
<thead>
<tr>
<th>ID</th>
<th>COL 1</th>
<th>COL 2</th>
<th>COL 3</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>
<td class="c4">15,24</td>
</tr>
<tr>
<td>2</td>
<td class="c1">95,35</td>
<td class="c3">36,25</td>
<td class="c6">45,38</td>
<td class="c3">28,73</td>
</tr>
<tr>
<td>3</td>
<td class="c2">37,25</td>
<td class="c4">15,24</td>
<td class="c8">41,25</td>
<td class="c5">8,36</td>
</tr>
<tr>
<td>4</td>
<td class="c7">97,64</td>
<td class="c3">28,73</td>
<td class="c0">36,94</td>
<td class="c0">8,36</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>SUM</th>
<th>---</th>
<th>---</th>
<th>---</th>
<th>---</th>
</tr>
</tfoot>
</table>
https://jsfiddle.net/d9kju4sr/1/
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>
I have a table with border-collapse and most cells with dotted border.
The rendering in Firefox is odd.
The code is:
<table style="border-collapse: collapse">
<tr>
<td style="border: 1px solid blue">a</td>
<td style="border: 1px solid blue">b</td>
</tr>
<tr>
<td style="border: 1px dotted blue">a</td>
<td style="border: 1px dotted blue">b</td>
</tr>
</table>
This is how it renders in Chrome vs Firefox:
Any ideas how to fix it?
There are bugs in browsers in rendering one pixel wide dotted borders, but there's no workaround for border of size 1px .In this particular case, the bug seems to disappear if you set the border width to 2px or more.
table td{
margin:0;
}
<table style="border-collapse: collapse">
<tr>
<td style="border: 2px solid blue">a</td>
<td style="border: 2px solid blue">b</td>
</tr>
<tr>
<td style="border: 2px dotted blue">a</td>
<td style="border: 2px dotted blue">b</td>
</tr>
</table>
As an alternative you can use CSS Outlines.
https://developer.mozilla.org/en-US/docs/Web/CSS/outline
However, keep in mind that outlines are unlike borders:
Outlines never take up space, as they are drawn outside of an element's content.
So in that case with border collapse your outlines would run over each other on your table cells. This can fixed by adding a -1px outline-offset.
Two examples are below, First table using outline, and the second table using border for comparison.
Obligatory Fiddle:
https://jsfiddle.net/sh9oqq2k/1/
Browser support:
https://caniuse.com/#search=outline
/* global */
table {
border-collapse: collapse;
}
td {
padding: 8px;
}
/* outline */
tr:nth-child(1) td {
outline: 1px solid blue;
outline-offset: -1px;
}
tr:nth-child(2) td {
outline: 1px dotted blue;
outline-offset: -1px;
}
/* border */
table.bordered tr:nth-child(1) td {
border: 1px solid blue;
}
table.bordered tr:nth-child(2) td {
border: 1px dotted blue;
}
<p>
Outline
</p>
<table>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
</table>
<p>
Border
</p>
<table class='bordered'>
<tr>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
</table>
Trying to make my table look nice, but I cannot get rid of those sharp corners...
Here is the HTML
<table border="0" cellspacing="0" cellpadding="0" class="expense-table-pink">
<thead>
<tr style="background-color: #bb1133;">
<th>aaa</th>
<th>bbb</th>
<th>ccc</th>
</tr>
</thead>
<tbody>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
</tbody>
</table>
And the CSS
.expense-table-pink {
width:100%;
background-color: #f9ecee;
border: 1px solid #bb1133;
border-collapse: separate;
border-spacing: 0;
border-radius: 6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font-weight: normal;
}
It's a matter of border pixels vs. corner pixels. In this case, increasing the border to 2px fixes this issue:
.expense-table-pink {
width:100%;
background-color: #f9ecee;
border: 2px solid #bb1133;
border-collapse: separate;
border-spacing: 0;
border-radius: 6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font-weight: normal;
}
<table border="0" cellspacing="0" cellpadding="0" class="expense-table-pink">
<thead>
<tr style="background-color: #bb1133;">
<th>aaa</th>
<th>bbb</th>
<th>ccc</th>
</tr>
</thead>
<tbody>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
</tbody>
</table>
This is that pointed red thing you are seeing,
style="background-color: #bb1133;
The accepted answer does not solve the issue completely because what if you really need border to be 1px such as in this case. Why increase the border when you can do something like this,
table { border-collapse: separate; }
tr:first-child th:first-child { border-top-left-radius: 5px; }
tr:first-child th:last-child { border-top-right-radius: 5px; }
This solves the border-radius issue without changing border itself which needed to be 1 px. Make border-radius of th corners to 5px to leave no gaps. My answer is the correct solution.
You can add a class for the left and the right corners...
CSS
.thleft {
border-radius: 6px 0 0 0;
}
.thright {
border-radius: 0 6px 0 0;
}
HTML
<th class="thleft">aaa</th>
<th>bbb</th>
<th class="thright">ccc</th>
JSFiddle here
I want to focus a full table when is selected, but when I click on the table focus is not working.
So I tried hover on the table and hover is working. How can I focus the whole table?
https://jsfiddle.net/bbe7x7bp/1/
table {
border: 1px solid #e2e2e4;
text-align: left;
}
table:hover {
border: 3px solid #878b93;
outline: 1px solid #242b3a;
}
.table:focus {
border: 1px solid blue;
outline: 1px solid darkblue;
}
You can add tabindex to your table (in the HTML). Set tabindex="0" to put it in the natural tab order or tabindex=-1 to make it focusable, but not something you can tab to. tabindex=1 will force it to be the first thing in the tab order..
Just like here: https://jsfiddle.net/bbe7x7bp/2/
<table class="table" tabindex="1">
<tbody>
<trhead>
<td colspan="7">Some title</td>
</trhead>
<tr class="table-info">
<td>data 1</td>
<td>data 2</td>
<td colspan="5">data something</td>
</tr>
</tbody>
</table>
and
table {
border: 1px solid #e2e2e4;
text-align: left;
}
table:hover {
border: 3px solid #878b93;
outline: 1px solid #242b3a;
}
.table:focus {
border: 1px solid blue;
outline: 1px solid darkblue;
}
and you can read about tabindex right here: http://www.w3schools.com/tags/att_global_tabindex.asp
<a>s, <button>s, <input>s, and textareas all have the :focus state by default, but you can give a focus state to any element in HTML5. Both the contenteditable and tabindex attributes work for this, as in this example:
<table contenteditable tabindex="1">
<thead>
<tr>
<th>Option 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>Me</td>
</tr>
</tbody>
</table>
Codepen here