I have the following HTML table. As you can see I have two columns that have a colspan attribute. I want the td’s inside those to have thinner borders, so that users can more clearly see « real » column switching. I can’t seem to achieve that with simple HTML/CSS, I tried giving a class to the associated th elements and fiddle int the CSS but with no success. So my questions are :

• can this be achieved with simple HTML/CSS ?
• if not, could another solution be given to improve readibility, maybe with padding (add padding to td elements that are not in the subcols)

Thanks

<table class="superpronos">
<thead><tr>
<th>Vainqueur</th>
<th colspan="2" class="subcol">Finalistes</th>
<th colspan="4" class="subcol">Demi-finalistes</th>
<th>Meilleur Buteur</th>
<th>Meilleure Attaque</th>
<th>Pire Défense</th>
<th>La France ira</th>
<th>Équipe de ritals</th>
</tr></thead>
<tbody><tr>
<td>Angleterre</td>
<td>Angleterre</td><td> Espagne</td>
<td class="subcol">Espagne</td><td> Portugal</td><td> Pays-Bas</td><td> Angleterre</td>
<td>Harry Kane</td>
<td>Angleterre</td>
<td>Ukraine</td>
<td>en quart de finale</td>
<td>Turquie</td>
</tr>
<tr>
<td>Allemagne</td>
<td>Allemagne</td><td> Angleterre</td>
<td>Espagne</td><td> Pays-Bas</td><td> Allemagne</td><td> Angleterre</td>
<td>Musiala</td>
<td>Allemagne</td>
<td>Ecosse </td>
<td>en quart de finale</td>
<td>Autriche</td>
</tr>
<tr>
<td>Espagne </td>
<td>Espagne</td><td> Allemagne </td>
<td>Espagne</td><td> Allemagne</td><td> Angleterre</td><td> France</td>
<td>Morata </td>
<td>Allemagne </td>
<td>Ecosse </td>
<td>en demi-finale</td>
<td>Allemagne </td>
</tr>
<tr>
<td>Allemagne</td>
<td>Allemagne</td><td> Suisse</td>
<td>Allemagne</td><td> Angleterre</td><td> Suisse</td><td> Pays-Bas</td>
<td>Harry Kane</td>
<td>Allemagne</td>
<td>Écosse</td>
<td>en huitième de finale</td>
<td>Italie</td>
</tr>
<tr>
<td>Allemagne</td>
<td>Allemagne</td><td> Angleterre</td>
<td>Portugal</td><td> Allemagne</td><td> Angleterre</td><td> France</td>
<td>Morata</td>
<td>Allemagne</td>
<td>Ecosse</td>
<td>en demi-finale</td>
<td>Portugal</td>
</tr>
<tr>
<td>Allemagne</td>
<td>Allemagne</td><td> Angleterre </td>
<td>Allemagne</td><td> Angleterre</td><td> Portugal</td><td> France</td>
<td>Musiala</td>
<td>Allemagne</td>
<td>Ecosse</td>
<td>en demi-finale</td>
<td>Allemagne</td>
</tr>
<tr>
<td>Angleterre </td>
<td>France</td><td> Angleterre </td>
<td>France</td><td> Angleterre</td><td> Allemagne</td><td> Portugal</td>
<td>Kane</td>
<td>Allemagne</td>
<td>Écosse</td>
<td>en finale</td>
<td>Autriche</td>
</tr>
<tr>
<td>Allemagne</td>
<td>Allemagne</td><td> France</td>
<td>Allemagne</td><td> France</td><td> Angleterre</td><td> Portugal</td>
<td>Harry Kane</td>
<td>Allemagne</td>
<td>Georgie</td>
<td>en finale</td>
<td>Serbie</td>
</tr>
<tr>
<td>Allemagne</td>
<td>Allemagne</td><td> Angleterre</td>
<td>Allemagne</td><td> Angleterre</td><td> France</td><td> Portugal</td>
<td>Harry Kane</td>
<td>Allemagne</td>
<td>Ecosse</td>
<td>en demi-finale</td>
<td>Autriche</td>
</tr>
<tr>
<td>Allemagne </td>
<td>Allemagne</td><td> Italie</td>
<td>Allemagne</td><td> Italie</td><td> Portugal</td><td> Pays-Bas </td>
<td>Havertz</td>
<td>Allemagne </td>
<td>Hongrie</td>
<td>en quart de finale</td>
<td>Autriche </td>
</tr>
<tr>
<td>Allemagne</td>
<td> Allemagne</td><td> Angleterre</td>
<td> Angleterre</td><td> Allemagne</td><td> France</td><td> Portugal</td>
<td>Havertz</td>
<td>Allemagne</td>
<td>Albanie</td>
<td>en demi-finale</td>
<td>Autriche</td>
</tr>
</tbody></table>

Here is a pic for a clearer view : I highlighted the borders that I want to be thinner

enter image description here

Here is a jsfiddle link.
https://jsfiddle.net/a56d47hb/1/