Center <th> in bootstrap in double header table - html

Question

Hello i have a table and i want to center a th between two other th.
I want to change the position of th Vieillesse de base to be displayed in the center of Provisionnel and Régularisation.
Here my HTML :
<div class="row mt-1">
<div class="col-12">
<table class="table table-striped table-adjust ">
<thead class="cordonnes-cabinet">
<tr>
<th scope="col">Date</th>
<th scope="col" style="text-align:center" colspan="2">Vieillesse de base</th>
<th scope="col" style="text-align:right">Complémentaire</th>
<th scope="col" style="text-align:right">Total</th>
</tr>
<tr>
<th scope="col">...</th>
<th scope="col" style="text-align:right">Provisionnel</th>
<th scope="col" style="text-align:right">Régularisation</th>
<th scope="col" style="text-align:right">...</th>
<th scope="col" style="text-align:right">...</th>
</tr>
</thead>
<tbody class="cordonnes-cabinet">
#for (int i = 0; i < echeancierGeneriqueAjustee.Count; i++)
{
<tr>
<th style="font-weight:100">#(echeancierGeneriqueAjustee[i]["Date"])</th>
<td style="text-align:right">#(echeancierGeneriqueAjustee[i]["MontantProv"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[i]["MontantRegul"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[i]["MontantComplement"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[i]["TotalEcheance"])</td>
</tr>
}
<tr>
<th style="font-size:14px">Total</th>
<td style="text-align:right">#(echeancierGeneriqueAjustee[0]["TotalProv"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[0]["TotalRegul"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[0]["TotalComplement"])</td>
<td style="text-align:right">#(echeancierGeneriqueAjustee[0]["Total"])</td>
</tr>
</tbody>
</table>
</div>
</div>

Answer 1

The key to do this is use html colspan in the th, to simulate equality of width with the second row. Then you only need to use .text-center.
In you particular case, use colspan="2" in the second th
JS FIDDLE DEMO
<table class="table">
<thead class="cordonnes-cabinet">
<tr>
<th>Date</th>
<th colspan="2" class="text-center">Vieillesse de base</th>
<th>Complémentaire</th>
<th>Total</th>
</tr>
<tr>
<th style="width:10%">...</th>
<th class="text-center">Provisionnel</th>
<th class="text-center">Régularisation</th>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbbody>
<tr>
<th>col1</th>
<td class="text-center">col2</td>
<td class="text-center">col3</td>
<td>col4</td>
<td>col5</td>
</tr>
</tbbody>
</table>

Answer 2

So the issue here is that your text is centered but the Column to the right is X wide and creates a optical illusion that your column is a lot wider.
I would set the column saying "Complémentaire" to text-align: left with class text-left then it will create the illuion you want.
Ive attached a picture where you can see that your code actually centers the text its just an optical illuion
This is how it would look with left aligned in the blue column:
And now its just a question on how to make it pretier with paddings on the td's and th's