Search code examples
htmlcsshtml-table

Use thinner borders within td elements inside a colspan th


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 td elements that are not in the subcols)

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 ?


Solution

  • 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 used 2, 4, 5, 6 are 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 dash style instead of the solid standard, but the sky is the limit.

    table.superpronos{
      border-collapse: collapse;
      border: solid 1px gray;
    }
    
    table.superpronos thead tr{
      background: dodgerblue;
    }
    
    table.superpronos thead th{
      border: solid 1px gray;
      padding: 0 1em;
    }
    
    /*for each table cell in the tbody*/
    table.superpronos > tbody > tr > td{    
      border: solid 1px gray;  /*here you set the ordinary cell borders*/
      border-left: unset;
      text-align: center;
      padding: .2em 1em;
    }
    
    /*for some specific cells you set a different border-right*/
    tbody > tr > td:nth-child(2),
    tbody > tr > td:nth-child(4),
    tbody > tr > td:nth-child(5),
    tbody > tr > td:nth-child(6)
    {  
    
      /*border-right: solid 1px !important;*/
      border-right: dashed 1px !important;
    }
    <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>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>