bootstrap: Выравнивание заголовка таблицы по центру

137

22 апреля 2021, 21:20

Имеется вот такая картина:

Как выравнять заголовок 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>

UPDATE

<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>

Answer 1

добавьте в заголовок самой таблицы как отдельный 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>

стиль заголовка можно переопределить через свой класс по необходимости.

Answer 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>