How to align my columns if some are divided by 3 and some by 2?

user_10922921 0
Viewed 52

I'm trying to align my columns but I can't figure out how to make it works like I wish. On the picture you can see that some table have 3 columns and some have 2, I want to align the blue with the blue and the red with the red as you can see on the picture: enter image description here

here is a snippet with the last thing I tried to do width: 33% but it didn't work

.pricingTable tr td {
  width: 33%;
}
<table class="pricingTable">
   <thead>
      <tr>
         <td>
            <b>Abonnement Full Access</b>
         </td>
         <td></td>
         <td>Incl. open mat*</td>
      </tr>
   </thead>
   <tbody>
      <tr class="even">
         <td>3 mois</td>
         <td>Fr. 360.-</td>
         <td>Inclus dans le prix</td>
      </tr>
      <tr>
         <td>6 mois</td>
         <td>Fr. 670.-</td>
         <td>Inclus dans le prix</td>
      </tr>
      <tr class="even">
         <td>1 année</td>
         <td>Fr. 1090.-</td>
         <td>Inclus dans le prix</td>
      </tr>
   </tbody>
</table>
<table class="pricingTable">
   <thead>
      <tr>
         <td>
            <b>Abonnement 2 entraînements p. semaine</b>
         </td>
         <td></td>
         <td>Incl. open mat*</td>
      </tr>
   </thead>
   <tbody>
      <tr class="even">
         <td>3 mois</td>
         <td>Fr. 300.-</td>
         <td>Fr. 330.-</td>
      </tr>
      <tr>
         <td>6 mois</td>
         <td>Fr. 560.-</td>
         <td>Fr. 620.-</td>
      </tr>
      <tr class="even">
         <td>1 année</td>
         <td>Fr. 970.-</td>
         <td>Fr. 1040.-</td>
      </tr>
   </tbody>
</table>
<table class="pricingTable">
   <thead>
      <tr>
         <td>
            <b>Abonnement 1 entraînement p. semaine</b>
         </td>
         <td></td>
         <td>Incl. open mat*</td>
      </tr>
   </thead>
   <tbody>
      <tr class="even">
         <td>3 mois</td>
         <td>Fr. 200.-</td>
         <td>Fr. 230.-</td>
      </tr>
      <tr>
         <td>6 mois</td>
         <td>Fr. 370.-</td>
         <td>Fr. 420.-</td>
      </tr>
      <tr class="even">
         <td>1 année</td>
         <td>Fr. 680.-</td>
         <td>Fr. 800.-</td>
      </tr>
   </tbody>
</table>
<table class="pricingTable">
   <thead>
      <tr>
         <td>
            <b>Kids 1 entraînement p. semaine</b>
         </td>
         <td></td>
      </tr>
   </thead>
   <tbody>
      <tr class="even">
         <td>3 mois</td>
         <td>Fr. 170.-</td>
      </tr>
      <tr>
         <td>6 mois</td>
         <td>Fr. 310.-</td>
      </tr>
      <tr class="even">
         <td>1 année</td>
         <td>Fr. 580.-</td>
      </tr>
   </tbody>
</table>
<table class="pricingTable">
   <thead>
      <tr>
         <td><b>Open Mat*</b></td>
         <td></td>
      </tr>
   </thead>
   <tbody>
      <tr class="even">
         <td>1 mois</td>
         <td>Fr. 30.-</td>
      </tr>
   </tbody>
</table>
<table class="pricingTable">
   <thead>
      <tr>
         <td><b>Leçon privée</b></td>
         <td></td>
      </tr>
   </thead>
   <tbody>
      <tr class="even">
         <td>Leçon privée</td>
         <td>Fr. 80.-</td>
      </tr>
      <tr>
         <td>Leçon privée pour 2 personnes</td>
         <td>Fr. 60.- / p.P.</td>
      </tr>
      <tr class="even">
         <td>Leçon privée pour 4 personnes</td>
         <td>Fr. 50.- / p.P.</td>
      </tr>
      <td>
         <i>
         *La salle est ouverte pour un entraînement libre</i>
      </td>
   </tbody>
</table>

html-table css html
2 Answers

Set the width of the .pricingTable to 100% first. Also, add empty <td></td> tags to keep the table the same, especially if you are going to use the same class for all tables.

.pricingTable {
  width: 100%;
}

.pricingTable tr td {
  width: 33%;
}
<table class="pricingTable">
   <thead>
      <tr>
         <td>
            <b>Abonnement Full Access</b>
         </td>
         <td></td>
         <td>Incl. open mat*</td>
      </tr>
   </thead>
   <tbody>
      <tr class="even">
         <td>3 mois</td>
         <td>Fr. 360.-</td>
         <td>Inclus dans le prix</td>
      </tr>
      <tr>
         <td>6 mois</td>
         <td>Fr. 670.-</td>
         <td>Inclus dans le prix</td>
      </tr>
      <tr class="even">
         <td>1 année</td>
         <td>Fr. 1090.-</td>
         <td>Inclus dans le prix</td>
      </tr>
   </tbody>
</table>
<table class="pricingTable">
   <thead>
      <tr>
         <td>
            <b>Abonnement 2 entraînements p. semaine</b>
         </td>
         <td></td>
         <td>Incl. open mat*</td>
      </tr>
   </thead>
   <tbody>
      <tr class="even">
         <td>3 mois</td>
         <td>Fr. 300.-</td>
         <td>Fr. 330.-</td>
      </tr>
      <tr>
         <td>6 mois</td>
         <td>Fr. 560.-</td>
         <td>Fr. 620.-</td>
      </tr>
      <tr class="even">
         <td>1 année</td>
         <td>Fr. 970.-</td>
         <td>Fr. 1040.-</td>
      </tr>
   </tbody>
</table>
<table class="pricingTable">
   <thead>
      <tr>
         <td>
            <b>Abonnement 1 entraînement p. semaine</b>
         </td>
         <td></td>
         <td>Incl. open mat*</td>
      </tr>
   </thead>
   <tbody>
      <tr class="even">
         <td>3 mois</td>
         <td>Fr. 200.-</td>
         <td>Fr. 230.-</td>
      </tr>
      <tr>
         <td>6 mois</td>
         <td>Fr. 370.-</td>
         <td>Fr. 420.-</td>
      </tr>
      <tr class="even">
         <td>1 année</td>
         <td>Fr. 680.-</td>
         <td>Fr. 800.-</td>
      </tr>
   </tbody>
</table>
<table class="pricingTable">
   <thead>
      <tr>
         <td>
            <b>Kids 1 entraînement p. semaine</b>
         </td>
         <td></td>
         <td></td>
      </tr>
   </thead>
   <tbody>
      <tr class="even">
         <td>3 mois</td>
         <td></td>
         <td>Fr. 170.-</td>
      </tr>
      <tr>
         <td>6 mois</td>
         <td></td>
         <td>Fr. 310.-</td>
      </tr>
      <tr class="even">
         <td>1 année</td>
         <td></td>
         <td>Fr. 580.-</td>
      </tr>
   </tbody>
</table>
<table class="pricingTable">
   <thead>
      <tr>
         <td><b>Open Mat*</b></td>
         <td></td>
         <td></td>
      </tr>
   </thead>
   <tbody>
      <tr class="even">
         <td>1 mois</td>
         <td></td>
         <td>Fr. 30.-</td>
      </tr>
   </tbody>
</table>
<table class="pricingTable">
   <thead>
      <tr>
         <td><b>Leçon privée</b></td>
         <td></td>
         <td></td>
      </tr>
   </thead>
   <tbody>
      <tr class="even">
         <td>Leçon privée</td>
         <td></td>
         <td>Fr. 80.-</td>
      </tr>
      <tr>
         <td>Leçon privée pour 2 personnes</td>
         <td></td>
         <td>Fr. 60.- / p.P.</td>
      </tr>
      <tr class="even">
         <td>Leçon privée pour 4 personnes</td>
         <td></td>
         <td>Fr. 50.- / p.P.</td>
      </tr>
   </tbody>
</table>
         <i>
         *La salle est ouverte pour un entraînement libre</i>

user_41012100

Firstly, I would apply table-layout: fixed style rule to the table so that the width of the columns is not determined by the content. This gives you much more control over the styling. It's also supposed to be faster for the browser to layout.

Secondly, I would apply class names to differentiate the tables with two columns from those with three.

After doing these two things, it is trivial to style the tables as you wish.

HTML

<table class="pricingTable three-columns">

...

<table class="pricingTable two-columns">

CSS

table {
  table-layout: fixed;
  width: 100%;
}

td:last-child {
  width: 20%;
}

.three-columns td:nth-last-child(2) {
  width: 20%;
}

See here for a JFiddle.

user_54818070
Related