时间戳

首页 > 解决方案 > 双头表中的引导程序居中

html - 双头表中的引导程序居中

问题描述

您好，我有一张桌子，我想在另外两个之间居中。我想更改Vieillesse de base的位置以显示在Provisionnel和Régularisation的中心。

这是我的 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>

标签： htmlcssbootstrap-4

解决方案

所以这里的问题是您的文本居中，但右侧的列是 X 宽，并产生一种视觉错觉，即您的列更宽。

我会将“Complémentaire”列设置为text-align: left类，text-left然后它将创建您想要的错觉。

我附上了一张图片，您可以在其中看到您的代码实际上将文本居中它只是一个视觉错觉在此处输入图像描述

这是在蓝色列中左对齐的样子： 在此处输入图像描述

现在它只是一个关于如何在 td 和 th 上使用填充使其更漂亮的问题

推荐阅读