Выравнивание текста на столе с помощью Bootstrap

Question

В настоящее время я изучаю, как использовать начальную загрузку, и я борюсь со следующим: я создал простую таблицу, но информация для созданного мной заказа не будет правильно выровнена по категории. Может кто-нибудь помочь? Я предоставил ссылку на кодовую ссылку.

https://codepen.io/tacoholic/pen/LYYOrdb

Вот как я настроил HTML:

<h2>History</h2>
<div class="row">
<table class="table m-b-0" width="100%">
    <thead>
        <tr class="black-cell">
            <th width="10%">Date <i class="fa fa-angle-down"></i></th>
            <th width="10%">Packages</th>
            <th width="10%">Tier</th>
            <th width="15%">Total</th>
            <th width="25%">Approval</th>
        </tr>
    </thead>
</table>
    <div class="row">
        <div class="col-md-5 border-right">
    <h3>
        <span class="m-l-40">05/26/2018 - 05-30-2018</span>
        <span class="m-l-120">234</span>
        <span class="m-l-120">Tier 4</span>
        <span class="m-l-120">$12.45</span>
        <span class="m-l-120">Approved</span>
    </h3>
    <div>
        <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>

Answer 1

Хотя не совсем ясно, какова ваша цель, вот пример кода, который использует Bootstrap CDN. Вам необходимо убедиться, что вы правильно вложили столбцы в строки и строки в таблицы.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table">
  <thead>
    <tr>
      <th scope="col">Date</th>
      <th scope="col">Packages</th>
      <th scope="col">Tier</th>
      <th scope="col">Total</th>
      <th scope="col">Approval</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>05/26/2018 - 05-30-2018</td>
      <td>234</td>
      <td>Tier 4</td>
      <td>$12.45</td>
      <td>Approved</td>
    </tr>
  </tbody>
</table>

 <div>

<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>

Answer 2

Вы должны использовать элемент tbody с элементом thead, а элементы span должны быть заключены в tr для строки и th или td для раздела.

<table class="table">
  <thead>
    <tr class="black-cell">
        <th>Date <i class="fa fa-angle-down"></i></th>
        <th>Packages</th>
        <th>Tier</th>
        <th>Total</th>
        <th>Approval</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row"><span class="m-l-40">05/26/2018 - 05-30-2018</span></th>
      <td><span class="m-l-120">234</span></td>
      <td> <span class="m-l-120">Tier 4</span></td>
      <td> <span class="m-l-120">$12.45</span></td>
      <td> <span class="m-l-120">Approved</span></td>
    </tr>
  </tbody>
</table>