Question posted in 
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 readability, maybe with padding (add padding to
tdelements that are not in thesubcols)
table.superpronos {
border: 0;
/*padding:2px;*/
border-spacing: 0;
font-size: 95%;
border-collapse: collapse;
}
table.superpronos thead th {
font-family: Arial, Times, "Times New Roman", serif;
border: 1px solid #aaaaaa;
background-color: rgb(71, 159, 237);
padding: 8px;
}
table.superpronos tbody td {
text-align: center;
border: 1px solid #aaaaaa;
background-color: #F9F9F9;
padding: 4px;
/*margin:1em 1em 1em 1em;*/
}<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>Cartons</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 pic
Here is a jsfiddle link.
https://jsfiddle.net/ty9vhq36/
EDIT : my post was not clear about this but I was looking for a solution where the td’s would inherit the style from the th’s. That it is what I thought was impossible ?
2
Answers
First of all, you can’t have less than 1px borderes and keep consistency on all browsers if this is your question.
Either way you can do this easily by specifying a different border on your element.
I think you confused yourself, you need to check about rule specifity (aka priority): see it here
A simple way to do something like this would be this:
This works because IDs have a greater specificity than classes.
There are several ways to achieve such result, anyway I may suggest maybe the easiest one.
After you styled your table according to its default behaviour (we are talking especially about the row cells borders) you can add specific rules addressing given columns to style with a thinner right border (or with a different color, or with a different line style).
Here in this demo I show that scenario styling the elements responding to
tbody > tr > td:nth-child()as any td element being nth child of any row in the table body. The index for the children used2, 4, 5, 6are obviously the cells belonging to the spanning columns except the last one of each group.Needless to say, this approach is better than using classes because you don’t need to add a recurrent styling behaviour by marking in the html the interested columns for each single row.
This whole game could be further automated by running a javascript on page load that will scan the dom and style dynamically the tables without using harder to read and mantain css styling rules.
One last thing: since I see you were concerned about having a border thinner than 1px, and not being possible to narrow it down further, another solution could be to change a different property of the border to make it different. In this case I used the
dashstyle instead of thesolidstandard, but the sky is the limit.