Cách tạo table hiển thị trong bootstrap

<div class="table-responsive">
<table class="table table-hover  table-striped table-bordered tbTable">
  <thead>
    <tr>
      <th scope="col" class="col_Ngay"><i class="far fa-calendar-alt"></i> Ngày</th>
      <th scope="col" class="col_SoPhieu"><i class="fas fa-tasks"></i> Số phiếu</th>
      <th scope="col" class="col_NoiDung"><i class="fas fa-receipt"></i> Nội dung</th>
      <th scope="col" class="col_Thu"><i class="fas fa-plus-square"></i> Thu</th>
      <th scope="col" class="col_Chi"><i class="fas fa-minus-square"></i> Chi</th>
      <th scope="col" class="col_Ky"><i class="fas fa-minus-square"></i> Ký bởi</th>
      <th scope="col" class="col_UserName"><i class="fas fa-user-plus"></i> Người tạo</th>
    </tr>
  </thead>
  <tbody>
      <tr>
      <td class="col_Ngay"></td>
      <td class="col_SoPhieu"></td>
      <td class="col_NoiDung"></td>
      <td class='col_Thu'></td>
      <td class='col_Chi'></td>
      <td class="col_Ky"></td>
      <td class="col_UserName"></td>
    </tr>    
  </tbody>
  <tfoot>
    <tr>
     
      <td class="col_Ngay"></td>
      <td class="col_SoPhieu"></td>
      <td class="col_NoiDung"></td>
      <td class="col_Thu"></td>
      <td class="col_Chi"></td>
      <td class="col_Ky"></td>
      <td class="col_UserName"></td>
    </tr>
  </tfoot>
</table>
</div>

<style>
.tbTable thead tr th
{
    font-weight:bold;
}
.tbTable tbody .col_PhaiThanhToan
{
    font-weight:bold;color:Red;
}
.tbTable tfoot td
{
    font-weight:bold;
}
.col_ChucNang
{
    width:20px;
    text-align:center;
}

tbody .col_Thu,tfoot .col_Thu
{
color:#28a745;
text-align:right;
}
tbody .col_Chi,tfoot .col_Chi
{
color:red;
text-align:right;
}

tfoot .col_Thu,tbody .col_Chi
{
    text-align:right;   
}
.tt_ky
{
    font-size:0.8em;
}
.ghichunhanh
{
        font-size:0.9em;color:#6B6B6B;font-style:italic;
}
</style>