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;
}
Related
This is my failed attempt:
https://jsfiddle.net/j75hxxa2/1/
I want the block on the right side and the extra gray part gone.
Adding
float: right;
To the parent makes its children very small and tiny. If I try to widen the children by adding
width: 50%;
They break the line.
Is there a simple fix?
(Also I think
margin-top: 1px;
Isn't working?)
Thanks in advance
A better way is to use a table:
HTML:
<table>
<tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr>
<tr><td>I</td><td>II</td><td>III</td><td>IIII</td></tr>
</table>
CSS:
table {
border-collapse: collapse;
background: #000;
border-top: 1px solid #777;
border-left: 1px solid #777;
}
table tr td {
border-right: 1px solid #777;
border-bottom: 1px solid #777;
color: #fff;
}
Add float left to .cell as below, I have changed background color, change it back to your previously assigned or as you wish.
.cell {
width: 24.8%;
float:left;
}
#table {
margin-right: 1px;
margin-top: 1px;
background-color: #f22;
width:100%;
height:37px;
}
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;
}
Le Code (without background): http://jsfiddle.net/SP6ny/ (colors changed for extra contrast)
Basically I have LI elements, and I need to add this border to them:
there is a pattern in the background so the list must not have a background.
thanks.
(I have no idea what I"m doing.)
body{
background: black;
}
.rl_section{
color: white;
display: block;
font-size: 12px;
margin-bottom: 20px;
}
.rl_section:first-child;{
border-top: none;
}
.rl_section:last-child;{
border-bottom: none;
}
.rl_content{
width: 100%;
display: block;
border-top: 1px solid #aaf;
border-bottom: 1px solid #a55;
padding: 3px 0;
}
You could use a technique like this: http://jsfiddle.net/sl1dr/Hub86/
Basically I am using top and bottom borders with differing colors.
Make the background of the container of the LI elements black. Make a margin-top:1px; on the LI elements themselves. then a border-top:1px solid {#YOUR COLOR CODE}; on the elements.
you can use the outline propperty for 1 color and border for the other
li {
outline: 1px gray solid;
border: 1px black solid;
}
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>