<div class="container">
  <h1>大拍賣購買流程</h1>
  
  
  <div class="card">
  <div class="card-header d-flex justify-content-between align-items-end">
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-target
  </button>
    <p class="m-0 h3">NT$ 580</p>
  </div>
  <div class="collapse" id="collapseExample">
    <div class="card card-body">
      <table class="table">
              <thead>
                <tr>
                  <th scope="col" width="50"></th>
                  <th scope="col" width="50">
                   
                  </th>
                  <th scope="col" width="200">商品名稱</th>
                  <th scope="col" width="100">數量</th>
                  <th scope="col" width="50">小計</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th scope="row">
                    <a data-toggle="modal" data-target="#removeModal" data-whatever="金牌西裝" href="#">
                    <i class="fas fa-trash-alt"></i>
                    </a>
                  </th>
                  <td>
                    <div class="card border-secondary">
                      <div class="card-body bg-cover" style="background-image:url(https://upload.cc/i1/2020/12/26/y5BPdl.jpg);">
                        
                      </div>
                    </div>
                    
                  </td>
                  <td>金牌西裝</td>
                  <td>1件</td>
                  <td class="text-right">$520</td>
                </tr>
              </tbody>
              <tfoot>
                <tr>
                  <td colspan="4" class="text-right">運費 </td>
                  <td class="text-right">$60</td>
                </tr>  
                <tr>
                  <td colspan="4" class="text-right">合計 </td>
                  <td class="text-right">$580</td>
                </tr>  
              </tfoot>
            </table>
    </div>
  </div>
</div>
</div>
.border-rounded{
  border-radius:50px;
}
.bg-cover{
  background-size: cover;
  background-position: center center;
}

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js
  3. https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js