Apologies if the title is not very descriptive, I couldn't find the right words to use. Below is the table in question.
https://i.sstatic.net/LHwbG.png
I'm looking to remove the white border (background of the table) from just the upper-left cell. I still want the white background between the other cells, but not in that specific cell. Here's an example of how I want it to appear.
https://i.sstatic.net/ELJNj.png
My initial idea was to add a ::after pseudo-element to that cell with some border or padding to cover the gap between the cell and the page background, but I'm unsure of how to implement this. Any suggestions?
Below is the CSS used 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 is some HTML related to this part of the table.
<table id="the_table" width="100%>
<tbody>
<tr class="head1">
<td class="corner"></td>
<td><a href="https://stackoverflow.com">Candidate 1</a></td>
<td><a href="https://stackoverflow.com">Candidate 2</a></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>
More importantly, where does the border come from? It seems to be the white background of the table, but what exactly causes that space between the cells?