This is my code (obviously messy, just for quick testing)
Code: Select all
<style type="text/css">
table {
width: 99%;
border-spacing: 0;
border-collapse: collapse;
}
tr {
border: 1px solid #fff;
}
tr:hover {
background-color: #CBD3CA;
border: 1px solid #000;
}
</style>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>I am running into - from what i've read - is border conflicts.
I have tried manipulating css here and there, but nothing is working.
Note: When a tr is not hovered over, I do not want it to have any border. The border will only display when the mouse hovers over a certain table row.
Any ideas on how I can get this to work?