Remove table background in one cell - css

Question

Sorry if the title isn't descriptive, I didn't know how to word it. Here's the table in question.
Is it possible for me to remove the white border (the background of the table) from this upper-left cell? I still want this white background between the rest of the cells, but in that upper-left I want it removed. Here's how I want it to look.
My initial thought is to have some ::after pseudo-element on that cell that has some border or padding that can cover that gap between the cell and page background, but I don't know how to do that. Any ideas?
Here's the CSS on this page.
body{
background: #C3DEF2;
font-family: Noto Sans, Roboto, Helvetica, Arial, sans-serif;
}
table{
background: white;
table-layout: fixed;
}
tr:nth-child(even){
background: lightgray;
}
td{
padding: 20px;
}
td.corner{ /* cell in upper-left corner */
background: #C3DEF2;
}
.head1{ /* top row */
text-align: center;
}
.head2{ /* leftmost column */
text-align: right;
}
.head1, .head2{
background: lightblue;
text-transform: uppercase;
font-weight: 600;
}
As requested, here's some of the HTML relating to this part of the table.
<table id="the_table" width="100%">
<tbody>
<tr class="head1">
<td class="corner"></td>
<td>Candidate 1</td>
<td>Candidate 2</td>
</tr>
<tr>
<td class="head2">Education</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="head2">Election Reform</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="head2">Environment</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="head2">Foreign Policy</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Probably more importantly, where does this border come from? It's the white background of the table, but what causes that space between the cells?

Answer 1

Here's a quick solution:
HTML:
<table>
<tr>
<td style="border: 1px inset white;">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
CSS:
table {
margin: 20px;
border-collapse: collapse;
border-spacing: 0;
}
td {
width: 40px;
height: 40px;
border: 1px solid black;
text-align: center;
}
td:hover {
border: 1px solid red;
}
DEMO:
https://liveweave.com/7eIF6k