css - border-right of a td element overflow border-bottom - css

Question

I have a table and I applied the border on td elements inside of it, now when I hover a td I want the tr to be selected by changing the borders of td elements inside, but the right border of a td is on top of the bottom border, so the corner doesn't change color, and I do not want this to happen. Any ideas?
CSS
.advertisements table {
text-align: center;
font-size: 16px;
border-collapse: collapse;
width: 100%;
margin-top: 10px;
}
.advertisements table td {
border: 2px solid #F3FAFF;
padding: 10px;
}
.advertisements table tr {
background-color: #9EC630;
background: -moz-linear-gradient(#9EC630, #87AB29);
background: -o-linear-gradient(#9EC630, #87AB29);
background: -webkit-linear-gradient(#9EC630, #87AB29);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #9EC630), color-stop(1, #87AB29));
filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#9EC630, EndColorStr=#87AB29)";
background: linear-gradient(#9EC630, #87AB29);
}
.advertisements table tr:not(:first-child):hover {
background-color: #B8D669;
background: -moz-linear-gradient(#B8D669, #9EC630);
background: -o-linear-gradient(#B8D669, #9EC630);
background: -webkit-linear-gradient(#B8D669, #9EC630);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #B8D669), color-stop(1, #9EC630));
filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#B8D669, EndColorStr=#9EC630)";
background: linear-gradient(#B8D669, #9EC630);
}
.advertisements table tr:not(:first-child):hover td {
border-top: 2px solid #1A446C;
border-bottom: 2px solid #1A446C;
cursor: pointer;
}
.advertisements table tr:not(:first-child):hover td:first-child {
border-left: 2px solid #1A446C;
}
.advertisements table tr:not(:first-child):hover td:last-child {
border-right: 2px solid #1A446C;
}
.advertisements table tr td ~ table tr:not(:first-child):hover {
border-top: none;
}
.advertisements table tr:first-child:hover {
cursor: default;
}
HTML:
<div class="advertisements">
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
</div>
Source is here: http://dabblet.com/gist/c0a22609e6139ad83546

Answer 1

The answer to your question lies in the way browsers resolve border conflicts.
You can set the tr border to be a bit wider, or change the border-style, etc...
If you're unhappy with any of these, I suggest looking at a more complex solution, like border gradients.

Answer 2

Check if this could help you.
DEMO
HTML
<div class="advertisements">
<table cellspacing="0" cellpadding="0" >
<tr>
<td><div>1</div></td>
<td><div>2</div></td>
<td><div>3</div></td>
<td><div>4</div></td>
</tr>
<tr>
<td><div>1</div></td>
<td><div>2</div></td>
<td><div>3</div></td>
<td><div>4</div></td>
</tr>
<tr>
<td><div>1</div></td>
<td><div>2</div></td>
<td><div>3</div></td>
<td><div>4</div></td>
</tr>
</table>
</div>
CSS
.advertisements table {
text-align: center;
font-size: 16px;
/* border-collapse: collapse; */
width: 100%;
margin-top: 10px;
}
.advertisements div {
background-color: #9EC630;
background: -moz-linear-gradient(#9EC630, #87AB29);
background: -o-linear-gradient(#9EC630, #87AB29);
background: -webkit-linear-gradient(#9EC630, #87AB29);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #9EC630), color-stop(1, #87AB29));
filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr=#9EC630, EndColorStr=#87AB29)";
background: linear-gradient(#9EC630, #87AB29);
border-bottom: 2px solid #fff;
border-top: 2px solid #fff;
padding: 10px;
position: relative;
}
.advertisements div:after {
width: 4px;
background: #fff;
content: " ";
height: 100%;
position: absolute;
top: 0;
right: 0;
}
.advertisements tr:hover div {
border-color: #1A446C
}
.advertisements tr:hover td:first-child div:before {
width: 2px;
background: #1A446C;
content: " ";
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.advertisements td:last-child div:after {
display: none
}
.advertisements tr:hover td:last-child div:after {
width: 2px;
background: #1A446C;
height: 100%;
position: absolute;
top: 0;
right: 0;
display: block;
}

Answer 3

I find this question quite interesting so I tried to do some edits to it.
I didn't find the solution you are looking for yet, but I found out something interesting for me at least:
If you set the borders of td to be 1px wide at start and the hover ones to be 2px wide it works quite fine I would say: http://jsfiddle.net/Ax9eL/6/
But yeah this solution makes the table move which is not good/nice.
One more thing I tried border-collapse: separate; border-spacing:0px; instead of border-collapse: collapse; which doesn't look very good either: http://jsfiddle.net/Ax9eL/15/
Hope that someone might come up with better solutions ;)