将html表的行转换为引导卡

我有如下行的html表:

<table id="tb" class="table table-bordered table-hover table-condensed">
      <thead>
        <tr>
          <th>title</th>
          <th>price</th>
          <th>discount</th>
          <th>image</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>PRODUCT 1</td>
          <td align="right">24.43</td>
          <td align="right">53</td>
          <td>https://images-na.ssl-images-amazon.com/images/I/81xV%2BD1OkGL._AC_SL1500_.jpg</td>
        </tr>
        <tr>
          <td>PRODUCT 2</td>
          <td align="right">50.27</td>
          <td align="right">70</td>
          <td>https://images-na.ssl-images-amazon.com/images/I/61d-BO4sARL._AC_SL1500_.jpg</td>
        </tr>
        <!-- ... many other rows -->

<!-- I added this script to put the image link inside src  -->
<script>
  $('#tb td:nth-child(4n)').each((i, el) => {
  $(el).wrapInner(`<img src="${el.innerText}" class="img-fluid"/>`);
});
</script>

我想将每一行都转换为引导卡 我尝试使用jquery给每个引导类class =“ card”:

$('#tb tr').addClass("card")

它没有用,将每一行彼此返回

I want results like this: enter image description here