Центрирующий интервал в теле таблицы

Question

Я пытаюсь центрировать span в tbody, но я не уверен, как это сделать, и я не знаю, допустима ли эта структура, если я не включаю tr и tdэлементы.

html

<table class="table">
   <thead>
      <tr>
         <th>Rank</th>
         <th>
            <div>Name</div>
         </th>
         <th>
            <div>Age</div>
         </th>
         <th>Price</th>
      </tr>
   </thead>
   <tbody>
         <div><span>You haven’t added any data yet</span></div>
   </tbody>
</table>

css

tbody div {
  display: table-row;
}

tbody div span{
  display: block;
  text-align: center;
  width: 100%;
}

Answer 1

По договоренности вы должны включать tr и th в tbody

. Вы можете использовать colspan для объединения столбцов и стиль text-align:center для центрирования текста.

<table class="table" style="width:100%">
   <thead>
      <tr>
         <th>Rank</th>
         <th>
            <div>Name</div>
         </th>
         <th>
            <div>Age</div>
         </th>
         <th>Price</th>
      </tr>
   </thead>
   <tbody>
      <tr> 
         <td colspan="4" style="text-align: center;">You haven’t added any data yet</td>
      </tr>
   </tbody>
</table>

Answer 2

Используйте colspan:

<table class="table">
   <thead>
      <tr>
         <th>Rank</th>
         <th>
            <div>Name</div>
         </th>
         <th>
            <div>Age</div>
         </th>
         <th>Price</th>
      </tr>
   </thead>
   <tbody>
      <tr> 
         <td colspan="3">You haven’t added any data yet</td>
      </tr>
   </tbody>
</table>