Центр <th>в начальной загрузке в таблице с двумя заголовками

Question

Здравствуйте, у меня есть таблица, и я хочу расположить цент между двумя другими.Я хочу изменить положение th Vieillesse de base для отображения в центре Provisionnel и Регуляризация .

Вот мой 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

Ключом для этого является использование html colspan в th, чтобы имитировать равенство ширины со второй строкой.Тогда вам нужно всего лишь использовать .text-center.
В вашем конкретном случае используйте colspan="2" во втором 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

Таким образом, проблема заключается в том, что ваш текст центрируется, но столбец справа имеет ширину X и создает иллюзию, что ваш столбец намного шире.

Я бы поставил столбец с надписью "Complémentaire"до text-align: left с классом text-left, тогда он создаст нужную вам иллюзию.

Я прикрепил картинку, где вы можете видеть, что ваш код фактически центрирует текст, это просто оптическая иллюзия

Вот как это будет выглядеть с выравниванием по левому краю в синей колонке:

А теперь вопрос только в том, как сделать его более привлекательнымс набивками на тд и тх