主页 / 问题 / 1006139
Accepted
Alexandr
Asked:2020-07-24 15:52:32 +0000 UTC2020-07-24 15:52:32 +0000 UTC

bootstrap：居中对齐表头

  • 772

有这张图：在此处输入图像描述

如何将 h2 标题与表格中心对齐？我尝试将其设置为样式，作为类，将其添加到单独的row. 居中文本仅以特定分辨率出现。如果您全屏打开页面，则文本总是“移出”。

html代码

    <div class="col-md-6">
      <h2 class="text-center">Выстрелы</h2>
      <table class="table" id="shipField">
        <thead>
            <th class="cell no_border" *ngFor="let letter of alphabet" >{{ letter }}</th>
        </thead>
        <tr *ngFor="let row of this.battleFieldService.shipField; let i = index" >
          <td class="cell no_border">{{ i }}</td>
          <td *ngFor="let cell of row">
              <app-cell [status]=cell.status [x]=cell.x [y]=cell.y></app-cell>
          </td>
        </tr>
      </table>
    </div>

更新

<table class="table" id="shootField">
          <thead>
            <tr>
              <thead>
                <th class="text-center" colspan="11">Выстрелы</th>
              </thead>
            </tr>
              <th class="cell no_border" *ngFor="let letter of alphabet" >{{ letter }}</th>
          </thead>
          <tr *ngFor="let row of this.shootService.shotField; let i = index">
              <td class="cell no_border">{{ i }}</td>
              <td *ngFor="let cell of row">
                <app-cell id="cell" [status]=cell.status [x]=cell.x [y]=cell.y (click)="shoot(cell)"></app-cell>
            </td>
          </tr>
        </table>

在此处输入图像描述

html

2 个回答

  1. Best Answer

    作为单独的 TR 添加到表本身的标题中，如下所示：

    <thead> 
    <tr> 
        <th style="text-align: center !important;" colspan="{{alphabet.length}}">Выстрелы</th>
    </tr> 
    <tr>
        <th class="cell no_border" *ngFor="let letter of alphabet" >{{ letter }}</th>
    </tr> 
</thead>

    可以根据需要通过您的类覆盖标题样式。

    • 1

  2. 通过将表名<caption>Корабли</caption>插入标签后立即将其放置在标签中<table>

    <table>
    <caption>Корабли</caption>
    <tr>
        <td>ячейка</td>
        <td>ячейка</td>
        <td>ячейка</td>
        <td>ячейка</td>
        <td>ячейка</td>
    </tr>
    <tr>
        <td>ячейка</td>
        <td>ячейка</td>
        <td>ячейка</td>
        <td>ячейка</td>
        <td>ячейка</td>
    </tr>
    <tr>
        <td>ячейка</td>
        <td>ячейка</td>
        <td>ячейка</td>
        <td>ячейка</td>
        <td>ячейка</td>
    </tr>
    <tr>
        <td>ячейка</td>
        <td>ячейка</td>
        <td>ячейка</td>
        <td>ячейка</td>
        <td>ячейка</td>
    </tr>
    <tr>
        <td>ячейка</td>
        <td>ячейка</td>
        <td>ячейка</td>
        <td>ячейка</td>
        <td>ячейка</td>
    </tr>
</table>

    • 0

相关问题