I am trying to highlight the border of a table row on hover. Unfortunately this only works for the first row of cells. Lower rows have one border that does not change color. I have tried using outline but it doesn't play nice with :hover in webkit.
http://jsfiddle.net/S9pkM/2/
Imagine your standard table html. Some tr's with some td's. Hovering over a row should highlight its border in red.
table { border-collapse: collapse; } /*I am aware of separate */
table td { border: 3px solid black; }
table tr:hover td { border-top-color: red; border-bottom-color: red; }
table tr:hover td:first-child { border-left-color: red; }
table tr:hover td:last-child { border-right-color: red; }
I am open to alternate approaches, but I am stuck with the table structure. No inserting additional html besides standard <table> <tr> <td>
I've been facing this same problem and finally found a simpler solution here.
You can use this CSS trick ( border-style: double; ) that works for 1px borders:
#mytable tr.row:hover td
{
border-style: double;
border-color: red;
}
This will make your border-color work (be the top most one) no matter what. :-)
For 1px borders see Leniel's solution that uses border-style: double. This is much simpler. A double border is one that shows a 1px line for the inside and outside edges of the border. This doesn't do anything for a 1px border, but on >1px there is a gap.
For borders >1px you remove the bottom border for all of the <td>'s with border-bottom: 0. The top borders of the other cells will keep everything looking the way they should, except for the last row. The last row we fix with tr:last-child td { border-bottom: your border style }. Finally in your hover pseudoclass you set the bottom border.
http://jsfiddle.net/S9pkM/16/
table { border-collapse: collapse; } /*I am aware of separate */
table td { border: 1px solid black; width: 50px; height: 25px; padding: 5px; border-bottom: 0; }
table tr:last-child td { border-bottom: 1px solid black; }
table tr:hover td { border-top-color: red; border-bottom: 1px solid red; }
table tr:hover td:first-child { border-left-color: red; }
table tr:hover td:last-child { border-right-color: red; }
why not to use separate border?
http://jsfiddle.net/S9pkM/6/
Just put this code into your head section:
<style>
table td { border: 2px solid transparent; width: 50px; height: 50px; padding: 5px 5px 5px 5px;}
table td:hover {border:2px solid red; }
</style>
Related
I wanted to ask if it is possible to change the CSS so that the table rows are not highlighted in colour - but just have white border - when you hover over them?
The CSS is as follows:
<style>
body {
background-color: #0D0D0D;
}
tr:hover{
background: grey;
}
tr:hover td{
background: transparent !important;
}
</style>
And here is the full table:
https://jsfiddle.net/aqjccpvx/
Updated fiddle: https://jsfiddle.net/aqjccpvx/1/
Add this to your css rules:
tr:hover{
background: #403151;
border: 1px solid white;
}
EDIT:
If you want to fix the moving rows when hovering replace this:
border: 1px solid white;
With:
outline: 1px solid white;
Fixed fiddle: https://jsfiddle.net/aqjccpvx/4/
Of course this is possible:
Simply change your css to:
tr:hover{
border: 1px solid white;
}
tr:hover td{
background: #403151;
}
I'm working on a dynamically generated table atm. The CSS-File looks like this:
...
td {
border: 1px solid white;
}
tr {
border: 1px solid black;
font-family: Arial;
}
table {
width: 850px;
border-spacing: 8px 8px;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
text-align: center;
}
...
I don't want to see the border of the cells, BUT the cells need to be there, because they are a placeholder, so I change their color to white.
My problem is that I don't know why the border of the rows won't get displayed. Or let's say, is it possible to display the row's border, but not the cells'?
Since different browsers behave differently, where table borders are concerned, I found it always more consistent, to put the borders to the top/bottom of the cells instead of the rows:
td {
border-bottom: 1px solid #000;
}
Since this will draw the top border of each cell, it will look like the row has a border(-bottom).
To add another border to the very top:
tr:first-child td {
border-top: 1px solid #000;
}
Finally, if you need the left and right borders too, add them to the first/last cell of each row:
td:first-child {
border-left: 1px solid #000;
}
td:last-child {
border-right: 1px solid #000;
}
Sorry, if this looks clumsy, but in my experience this will work better than trying to force the rows to display a correct border.
Please try this:
tr {
outline: thin solid black
font-family: Arial;
}
tr{
outline : 1px solid black;
}
I'm using the following CSS to achieve a highlighting effect on the table row currently hovered:
#container table {
border-collapse: collapse;
}
#container table td {
border: 2px solid white;
}
#container table tr:hover td {
border-top: 2px solid #999;
border-bottom: 2px solid #999;
}
On all but the top-most tbody row only the bottom border is styled with #999. The top row correctly shows two borders. It looks like the white bottom-border of the previous row covers the grey top-border of the hovered one (tested in FF 42). Is there a way to get this right?
JSFiddle
Try this:
#container table {
border-collapse: collapse;
}
#container table td {
border-top: 2px solid #FFF;
}
#container table tr:hover td {
border-top: 2px solid #999;
border-bottom: 2px solid #999;
}
DEMO: https://jsfiddle.net/4g2w420o/5/
Try this, does it work correctly JSFIDDLE
#container table {
border-collapse: collapse;
}
#container table td {
/*border: 2px solid white; I have commented this */
}
#container table tr:hover td {
border-top: 2px solid #999;
border-bottom: 2px solid #999;
}
How about this?
https://jsfiddle.net/4g2w420o/6/
<div id="container">
<table>
<tr><td>ABC</td><td>DEF</td></tr>
<tr><td>ABC</td><td>DEF</td></tr>
<tr><td>ABC</td><td>DEF</td></tr>
</table>
</div>
#container table {
border-spacing: 0px;
border-collapse: separate;
}
#container table tr td {
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;
}
#container table tr:hover td {
border-top: 2px solid #999;
border-bottom: 2px solid #999;
}
Here's the issue. I have my code so that I should be seeing a border on top and bottom of each <tr> item. However, I only see what's on bottom except for the top element.
.tstyle1 {
margin: 10px 0 0 30px;
width: 950px;
}
.tstyle1 tr {
height: 120px;
border-bottom: 1px solid black;
border-collapse: separate;
border-top: 1px solid black;
border-bottom: 1px solid orange;
}
.tstyle1 td {
border: none;
}
Here's the issue recreated.
http://jsfiddle.net/fL3rx/
Try
adding display: block; to your .tstyle1 tr
The issue is that your border-bottom definition is simply covering your border-top definition. So the color beneath does not show. Try setting the border-bottom:none and you'll see the top border shows
The suggestion by #Pricey did some magic though.
I need to have such thin line for the whole table as seen above. The above image is a sample only. My solution, doesn't work. The table shows no border at all.
Here is my CSS:
table {
border-width: thin;
border-spacing: 2px;
border-style: none;
border-color: black;
}
Style the td and th instead
td, th {
border: 1px solid black;
}
And also to make it so there is no spacing between cells use:
table {
border-collapse: collapse;
}
(also note, you have border-style: none; which should be border-style: solid;)
See an example here: http://jsfiddle.net/KbjNr/