如何将HTML表格转为Bootstrap网格并保持间距，满足ADA合规？

为符合《美国残疾人法案》（Americans with Disabilities Act，ADA）要求，我的购物车必须使用无序列表——因为表格在屏幕阅读器上的支持功能不足。我已经将HTML表格转为列表，在每个列表项中使用container，并创建了container/row结构，但原有的CSS不再生效，无法还原之前的样式。

生产环境代码 #

<head>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.js"></script>
</head>
<body>
          <div class="cart-hover" tabindex="-1">
              <div class="cart-hover-header">
                  <b>Subtotal: $13,654.99</b>
                  <a class="btn btn-primary pagearea" href="#" title="View Cart" data-pagearea="87">View Cart</a>
              </div>
              <table class="table table-striped">
                  <tbody><tr>
                          <td class="align-middle pl-3">
                              <div class="cart-item-img">
                                      THUMB
                                  </div>                            </td>
                          <td class="align-middle text-center">1</td>
                          <td class="align-middle text-wrap">
                              <a id="cart-item-307181" class="text-reset pagearea" href="#" title="Gibson Dave Mustaine Flying V EXP Electric Guitar (with Case)" data-pagearea="86">
                                  Gibson Dave Mustaine Flying V EXP Electric Guitar (with Case)
                              </a>
                          </td>
                          <td class="align-middle text-center pr-3">$2,799.00</td>
                      </tr>
                  <tr>
                          <td class="align-middle pl-3">
                              <div class="cart-item-img">
                                      THUMB
                                  </div>                            </td>
                          <td class="align-middle text-center">1</td>
                          <td class="align-middle text-wrap">
                              <a id="cart-item-238870" class="text-reset pagearea" href="#" title="Steinberger Spirit XT-2 Standard Electric Bass (with Gig Bag)" data-pagearea="86">
                                  Steinberger Spirit XT-2 Standard Electric Bass (with Gig Bag)
                              </a>
                          </td>
                          <td class="align-middle text-center pr-3">$449.00</td>
                      </tr>
                  <tr>
                          <td class="align-middle pl-3">
                              <div class="cart-item-img">
                                      THUMB
                                  </div>                            </td>
                          <td class="align-middle text-center">1</td>
                          <td class="align-middle text-wrap">
                              <a id="cart-item-246567" class="text-reset pagearea" href="#" title="Gibson J-45 Standard Acoustic-Electric Guitar (with Case)" data-pagearea="86">
                                  Gibson J-45 Standard Acoustic-Electric Guitar (with Case)
                              </a>
                          </td>
                          <td class="align-middle text-center pr-3">$2,549.00</td>
                      </tr>
                  </tbody>
              </table>
          </div>
</body>

开发环境代码 #

<head>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.js"></script>
</head>

<body>
  <div class="cart-hover" tabindex="-1">
    <div class="cart-hover-header">
      <b>Subtotal: $6,247.00</b>
      <a class="btn btn-primary pagearea" title="View Cart" data-pagearea="87">View Cart</a>
    </div>

    <ul class="list-unstyled">
      <li style="justify-content: space-between; background-color: rgba(0,0,0,.05);">
        <div class="container">
          <div class="row">
            <div class="col col-2 col align-middle pl-3">
              <div class="cart-item-img">
                THUMBNAIL
              </div>
            </div>

            <div class="col col-1 col align-middle text-center">1</div>

            <div class="col col-7 col align-middle text-wrap">
              Gibson Dave Mustaine Flying V EXP Electric Guitar (with some extra text for a second line)
            </div>

            <div class="col col-1 align-middle text-center pr-3">$2,799.00</div>
          </div>
        </div>
      </li>

      <li style="justify-content: space-between; ">
        <div class="container">
          <div class="row">
            <div class="col col-2 col align-middle pl-3">
              <div class="cart-item-img">
                THUMBNAIL
              </div>
            </div>

            <div class="col col-1 align-middle text-center">1</div>

            <div class="col col-7 align-middle text-wrap">
              Steinberger Spirit XT-2 Standard Electric Bass (with some extra text for a second line)
            </div>
            <div class="col col-2 align-middle text-center pr-3">$449.00</div>
          </div>
        </div>
      </li>

      <li style="justify-content: space-between; background-color: rgba(0,0,0,.05);">
        <div class="container">
          <div class="row">
            <div class="col col-2 col align-middle pl-3">
              <div class="cart-item-img">
                THUMBNAIL
              </div>
            </div>

            <div class="col col-1 align-middle text-center">1</div>

            <div class="col col-7 align-middle text-wrap">
              Gibson J-45 Standard Acoustic-Electric Guitar (with some extra text for a second line)
            </div>
            <div class="col col-2 align-middle text-center pr-3">$2,999.00</div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</body>

内容的提问来源于stack exchange，提问作者NobleUplift