Table cell highlighting (adjucent cells) - misleading - html

Question

I've to highlight multiple cells by adding a class called active to td. This class will change the border colour to highlight the cell.
The problem here is if the top, right, bottom and left cells of a particular cell is selected then the center cell will appear to be highlighted even though it is not actually highlighted.
You can find the problem here.
HTML
<div style="padding: 10px">
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td class="active">2.3</td>
<td>2.4</td>
<td>2.5</td>
</tr>
<tr>
<td>3.1</td>
<td class="active">3.2</td>
<td>3.3</td>
<td class="active">3.4</td>
<td>3.5</td>
</tr>
<tr>
<td>4.1</td>
<td>4.2</td>
<td class="active">4.3</td>
<td>4.4</td>
<td>4.5</td>
</tr>
<tr>
<td>5.1</td>
<td>5.2</td>
<td>5.3</td>
<td>5.4</td>
<td>5.5</td>
</tr>
</table>
</div>
CSS
table {
table-layout: fixed;
border-spacing: 0;
border-collapse: collapse;
}
td {
border: 1px solid lightgrey;
height: 60px;
width: 60px;
text-align: center;
vertical-align: middle;
}
td.active {
border: 1px solid blue;
border-style:double
}
Here cells 2.3, 3.2, 3.4 and 4.3 are highlighted but 3.3 is not highlighted, but visually it appears to be highlighted.
Can anybody suggest a way to solve this problem?

Answer 1

You can use
table {
table-layout: fixed;
border-spacing: 2px;
border-collapse: separate;
}
however it will pad the cells. If you don't want your cells to pad you can alternatively use a background to highlight the cells.
Demo:
table with cell padding
table with cell highlight