HTML таблицы: Имея границу только в заголовке таблицы с границами коллапсом: отдельно на столе

Question

Это, как мне нужен стол, чтобы посмотреть:

мне нужно добавить твердую границу под строка заголовка таблицы. Тем не менее, мне также нужно иметь промежуток между ячейками таблицы. Я должен использовать свойство border-collapse в таблице, чтобы получить интервал между серыми ячейками, а «border-collapse: separate» не позволяет мне добавить нижнюю границу в строку заголовка.

Как добавить сплошную рамку под заголовком таблицы, а также сохранить расстояние между столбцами таблицы?

Это стили, которые у меня есть; стиль border-collapse отменяет границу. Когда я удаляю крах-крах, работает пограничное дно.

tr.heading{ 
    border-bottom: 1px solid black; 
} 

table{ 
    border-collapse: separate; 
} 

Вот скрипка: https://jsfiddle.net/8u9krzyg/

Answer 1

В этом ответе используется border:collapse; плюс маржа и граница для вашего элемента <div class="wrap">, который у вас есть в ячейках таблицы, чтобы обеспечить границы псевдоэлементов.

EDITED: Я опубликовал другой метод, используя :: after на th элементах, чтобы пропустить интервал. Он имеет лучшую поддержку браузера.

th { 
 
    text-align:left; 
 
} 
 

 
body.checkout-cart-2 { } 
 

 
.checkout-cart-2 #cart-table{ 
 
    width:100%; 
 
} 
 

 
.cart-status li { 
 
    display: inline; 
 
} 
 

 
.checkout-cart-2 .return-link { 
 
    margin:1.5em 0; 
 
} 
 

 
.checkout-cart-2 .cart-left { 
 
    margin-bottom:1.5em; 
 
    padding:15px; 
 
} 
 

 
.checkout-cart-2 .cart-left, .checkout-cart-2 .cart-right{ 
 
    background:white; 
 
} 
 

 
#cart-table { 
 
    border-collapse: collapse; /* changed from separate */ 
 
    border:none; 
 
} 
 

 
#cart-table th { 
 
    font-family: "Verdana"; 
 
    font-size: 12px; 
 
    padding: 4px 10px; 
 
    text-transform: uppercase; 
 
} 
 

 
.cart-row { 
 
    font-family: "Verdana"; 
 
    height: 100%; /* needed for full height .wrap */ 
 
} 
 

 
.cart-row td { 
 
    vertical-align: top; 
 
    background: white; 
 
    padding: 0; 
 
    height: 100%; 
 
} 
 

 
.cart-row .description{ 
 
    padding:0; 
 
} 
 

 
.cart-row .item-thumb{ 
 
    padding-left:0; 
 
} 
 

 
.cart-row .item-name a { 
 
    font-size: 16px; 
 
    color: #0070c0; 
 
    font-weight: bold; 
 
} 
 

 
.cart-row .item-num { 
 
    font-size: 12px; 
 
} 
 

 
.cart-row .update a{ 
 
    color: #0070c0; 
 
} 
 

 
.cart-row div.remove a.btn{ 
 
    color: #0070c0; 
 
    background:none; 
 
    font-size:22px !important; 
 
    padding: 0 5px 0 1px; 
 
} 
 

 
.heading { /* new style */ 
 
    border-bottom: 1px solid black; 
 
} 
 

 
.gray .wrap { /* new style - moved background color from td to .wrap */ 
 
    background: #f6f6f6 none repeat scroll 0 0; 
 
} 
 

 
.wrap { /*new style to create pseudo cell borders */ 
 
    height: 100%; 
 
    padding: 0 10px; 
 
    display: inline-block; 
 
    width: 100%; /* fall back for browsers that do not support calc()*/ 
 
    width: calc(100% - 24px); /* calculates 100% width - 20 px padding + 4px right margin*/ 
 
    border-bottom: 4px solid #f2f2f2; 
 
    margin-right: 4px; /* creates white space "pseudo/implied" border between cells */ 
 
} 
 

 
.wrap > *:first-child { 
 
    padding-top: 10px; 
 
} 
 

 
.wrap > *:last-child { 
 
    padding-bottom: 10px; 
 
} 
 

 
.cart-row td:last-child .wrap, .remove .wrap { 
 
    margin-right: 0; /* removes "pseudo/implied" border on last cell .wrap */ 
 
    width: calc(100% - 20px); /* Calculates 100% width - 20 px padding */ 
 
} 
 

 
.availability>span { 
 
    font-weight: normal; 
 
} 
 

 
/* Clearfix */ 
 
.checkout-cart-2 .cart-left:before, 
 
.checkout-cart-2 .cart-left:after { 
 
    content: " "; 
 
    display: table;} 
 
.checkout-cart-2 .cart-left:after { 
 
    clear: both;} 
 

 
.checkout-cart-2 ul.cart-items { 
 
    margin:0; 
 
    list-style:none; 
 
} 
 

 
@media all and (min-width: 769px) { 
 
    .checkout-cart-2 .cart-left { 
 
     float:left; 
 
     width:75%; 
 
    } 
 
} 
 

 
.checkout-cart-2 .cart-right { 
 
    margin-bottom:1.5em; 
 
} 
 

 
.checkout-cart-2 .cart-left .btns { 
 
    margin:1.5em 0; 
 
} 
 

 
.checkout-cart-2 .cart-left .btns .btn { 
 
    width:100%; 
 
    margin-bottom:1em; 
 
} 
 

 
.checkout-cart-2 .cart-right .btns a.btn { 
 
    width:100%; 
 
    margin-bottom:1em; 
 
} 
 

 
@media all and (min-width: 769px) { \t \t \t \t \t 
 
    .checkout-cart-2 .cart-right { 
 
     float:right; 
 
     width:25%; 
 
    } \t \t 
 
} 
 

 
.checkout-cart-2 .item-details .item-name { 
 
    padding-right:2.5em; 
 
} 
 

 
@media all and (min-width: 769px) { 
 
    
 
    .checkout-cart-2 .item-list .item-details { 
 
     padding-right:1em !important; 
 
    } 
 
    
 
    .checkout-cart-2 .item-details .item-name { 
 
     padding-right:3.5em; 
 
    } 
 
    
 
    .checkout-cart-2 .item-opt .item-subtotal { 
 
     float:right; 
 
     clear: right; 
 
    } \t 
 
    
 
} 
 

 
.checkout-cart-2 .item-list .actions-panel .item-actions { 
 
    text-align:left; } 
 

 
.checkout-cart-2 .item-list .item-code-notes { 
 
    padding:0; 
 
    float:left; 
 
    width:100%; 
 
} 
 

 
.checkout-cart-2 .item-list .item-actions-wrap { 
 
    padding-left:0; 
 
    padding-right:0; 
 
    padding-bottom:0; 
 
    float:left; 
 
    width:100%; 
 
} 
 

 
.checkout-cart-2 .quote-items-note { 
 
    background:#fff6c5; 
 
    border-color:#ffd800; 
 
}

<div id="cartgrid"> 
 
      <table id="cart-table"> 
 
       
 
<tbody><tr class="heading"> 
 
    <th>Product Information</th> 
 
    <th>Quantity</th> 
 
    <th>Item Price</th> 
 
    <th>Subtotal</th> 
 
    <th></th> 
 
</tr> 
 

 
     <tr class="cart-row gray" data-orderlineid="02e9151d-24b4-46ca-8e9f-a4d000adbd83"> 
 
      <td class="product-info" width="45%"> 
 
       <div class="wrap"> 
 
        <div class="small-4 columns item-thumb"><a href=""><img src="" alt="95T Achieve Treadmill"></a></div> 
 
        <div class="small-8 columns description"> 
 
         <div class="item-name"> 
 
          <a href=""> 
 
           95T Achieve Treadmill 
 
           
 
          </a> 
 
         </div> 
 
          <div class="item-num"> 
 
      <span class="item-num-sku">Product Code: 456009801</span> 
 
    </div> 
 

 
         <div class="availability"> 
 
           <span class="instock">In Stock</span> 
 

 
         </div> 
 
        </div> 
 
       </div> 
 
      </td> 
 
      <td class="quantity"> 
 
       <div class="wrap"> 
 
        <div class="item-qty"> 
 
         <input type="text" id="02e9151d-24b4-46ca-8e9f-a4d000adbd83_qty" data-qty-input="" value="3" class="numerictextbox qty txt"> 
 
        </div> 
 
        <div class="update"> 
 
         <a class="update-btn" id="02e9151d-24b4-46ca-8e9f-a4d000adbd83_update" onclick="">Update</a> 
 
        </div> 
 
       </div> 
 
      </td> 
 
      <td class="price"> 
 
       <div class="wrap"> 
 
        <div class="price"> 
 
           <span class="price">$3,599.00</span> 
 
        </div> 
 
       </div> 
 
      </td> 
 
      <td class="subtotal"> 
 
       <div class="wrap"> 
 
        <div class="price"> 
 
          <div class="item-subtotal"> 
 
$10,797.00       </div> 
 
        </div> 
 
       </div> 
 
      </td> 
 
      <td class="remove"> 
 
       <div class="wrap"> 
 
         <div class="remove"> 
 
          <a class="btn btn-remove" onclick=""> 
 
           <i class="fa fa-times"></i> 
 
          </a> 
 
         </div> 
 
       </div> 
 
      </td> 
 
     </tr> 
 
     <tr class="cart-row" data-orderlineid="01a6aefa-7bb7-4559-b4db-a4d000c95fc8"> 
 
      <td class="product-info" width="45%"> 
 
       <div class="wrap"> 
 
        <div class="small-4 columns item-thumb"><a href=""><img src="" alt="Biceps Curl"></a></div> 
 
        <div class="small-8 columns description"> 
 
         <div class="item-name"> 
 
          <a href=""> 
 
           Biceps Curl 
 
           
 
          </a> 
 
         </div> 
 
          <div class="item-num"> 
 
      <span class="item-num-sku">Product Code: 455009813</span> 
 
    </div> 
 

 
         <div class="availability"> 
 
           <span class="instock">In Stock</span> 
 

 
         </div> 
 
        </div> 
 
       </div> 
 
      </td> 
 
      <td class="quantity"> 
 
       <div class="wrap"> 
 
        <div class="item-qty"> 
 
         <input type="text" id="01a6aefa-7bb7-4559-b4db-a4d000c95fc8_qty" data-qty-input="" value="1" class="numerictextbox qty txt"> 
 
        </div> 
 
        <div class="update"> 
 
         <a class="update-btn" id="01a6aefa-7bb7-4559-b4db-a4d000c95fc8_update" onclick="">Update</a> 
 
        </div> 
 
       </div> 
 
      </td> 
 
      <td class="price"> 
 
       <div class="wrap"> 
 
        <div class="price"> 
 
           <span class="price">$149.99</span> 
 
        </div> 
 
       </div> 
 
      </td> 
 
      <td class="subtotal"> 
 
       <div class="wrap"> 
 
        <div class="price"> 
 
          <div class="item-subtotal"> 
 
$149.99       </div> 
 
        </div> 
 
       </div> 
 
      </td> 
 
      <td class="remove"> 
 
       <div class="wrap"> 
 
         <div class="remove"> 
 
          <a class="btn btn-remove" onclick=""> 
 
           <i class="fa fa-times"></i> 
 
          </a> 
 
         </div> 
 
       </div> 
 
      </td> 
 
     </tr> 
 
     <tr class="cart-row gray" data-orderlineid="2d0c2838-645a-4849-9600-a4d000c9627a"> 
 
      <td class="product-info" width="45%"> 
 
       <div class="wrap"> 
 
        <div class="small-4 columns item-thumb"><a href=""><img src="" alt="XI8 CYCLEPRO Exercise Bike"></a></div> 
 
        <div class="small-8 columns description"> 
 
         <div class="item-name"> 
 
          <a href=""> 
 
           XI8 CYCLEPRO Exercise Bike 
 
           
 
          </a> 
 
         </div> 
 
          <div class="item-num"> 
 
      <span class="item-num-sku">Product Code: LFR3995</span> 
 
    </div> 
 

 
         <div class="availability"> 
 
           <span class="instock">In Stock</span> 
 

 
         </div> 
 
        </div> 
 
       </div> 
 
      </td> 
 
      <td class="quantity"> 
 
       <div class="wrap"> 
 
        <div class="item-qty"> 
 
         <input type="text" id="2d0c2838-645a-4849-9600-a4d000c9627a_qty" data-qty-input="" value="1" class="numerictextbox qty txt"> 
 
        </div> 
 
        <div class="update"> 
 
         <a class="update-btn" id="2d0c2838-645a-4849-9600-a4d000c9627a_update" onclick="">Update</a> 
 
        </div> 
 
       </div> 
 
      </td> 
 
      <td class="price"> 
 
       <div class="wrap"> 
 
        <div class="price"> 
 
           <span class="price-sale">$1,999.99</span> 
 
           <span class="price-old">$2,199.00</span> 
 
        </div> 
 
       </div> 
 
      </td> 
 
      <td class="subtotal"> 
 
       <div class="wrap"> 
 
        <div class="price"> 
 
          <div class="item-subtotal"> 
 
$1,999.99       </div> 
 
        </div> 
 
       </div> 
 
      </td> 
 
      <td class="remove"> 
 
       <div class="wrap"> 
 
         <div class="remove"> 
 
          <a class="btn btn-remove" onclick=""> 
 
           <i class="fa fa-times"></i> 
 
          </a> 
 
         </div> 
 
       </div> 
 
      </td> 
 
     </tr> 
 

 
      </tbody></table> 
 
     </div>

Другой метод Вот еще один метод, который использует th::after создать границу под заголовками таблицы. Этот метод имеет лучшую поддержку кросс-браузера.

th { 
 
    text-align:left; 
 
} 
 

 
body.checkout-cart-2 { } 
 

 
.checkout-cart-2 #cart-table{ 
 
    width:100%; 
 
} 
 

 
.cart-status li { 
 
    display: inline; 
 
} 
 

 
.checkout-cart-2 .return-link { 
 
    margin:1.5em 0; 
 
} 
 

 
.checkout-cart-2 .cart-left { 
 
    margin-bottom:1.5em; 
 
    padding:15px; 
 
} 
 

 
.checkout-cart-2 .cart-left, .checkout-cart-2 .cart-right{ 
 
    background:white; 
 
} 
 

 
#cart-table { 
 
    border-collapse: separate: 
 
    border:none; 
 
} 
 

 
#cart-table th { 
 
    font-family: "Verdana"; 
 
    font-size: 12px; 
 
    padding: 4px 10px; 
 
    text-transform: uppercase; 
 
    position: relative; 
 
    border-bottom: solid 2px black; /* base/fallback border for older browsers */ 
 
} 
 

 
.cart-row { 
 
    font-family: "Verdana"; 
 
    height: 100%; /* needed for full height .wrap */ 
 
} 
 

 
.cart-row td { 
 
    vertical-align: top; 
 
    background: white; 
 
    padding: 10px; 
 
    height: 100%; 
 
} 
 

 
.cart-row .description{ 
 
    padding:0; 
 
} 
 

 
.cart-row .item-thumb{ 
 
    padding-left:0; 
 
} 
 

 
.cart-row .item-name a { 
 
    font-size: 16px; 
 
    color: #0070c0; 
 
    font-weight: bold; 
 
} 
 

 
.cart-row .item-num { 
 
    font-size: 12px; 
 
} 
 

 
.cart-row .update a{ 
 
    color: #0070c0; 
 
} 
 

 
.cart-row div.remove a.btn{ 
 
    color: #0070c0; 
 
    background:none; 
 
    font-size:22px !important; 
 
    padding: 0 5px 0 1px; 
 
} 
 

 
.heading { 
 
    position: relative; 
 
} 
 

 
#cart-table th::after { /* creates a pseudo border to span gap in th spacing */ 
 
    background: black none repeat scroll 0 0; 
 
    bottom: -2px; 
 
    content: ""; 
 
    display: block; 
 
    height: 2px; /* matches #cart-table th border-bottom value */ 
 
    left: 0px; 
 
    position: absolute; 
 
    right: -2px; /* Matches table border-spacing value */ 
 
} 
 

 
#cart-table th:last-child::after { 
 
    right: 0px; /* Reset pseudo border so it does not extend outside of table */ 
 
} 
 

 
.gray td { /* new style - moved background color from td to .wrap */ 
 
    background: #f6f6f6 none repeat scroll 0 0; 
 
} 
 

 
.availability>span { 
 
    font-weight: normal; 
 
} 
 

 
/* Clearfix */ 
 
.checkout-cart-2 .cart-left:before, 
 
.checkout-cart-2 .cart-left:after { 
 
    content: " "; 
 
    display: table;} 
 
.checkout-cart-2 .cart-left:after { 
 
    clear: both;} 
 

 
.checkout-cart-2 ul.cart-items { 
 
    margin:0; 
 
    list-style:none; 
 
} 
 

 
@media all and (min-width: 769px) { 
 
    .checkout-cart-2 .cart-left { 
 
     float:left; 
 
     width:75%; 
 
    } 
 
} 
 

 
.checkout-cart-2 .cart-right { 
 
    margin-bottom:1.5em; 
 
} 
 

 
.checkout-cart-2 .cart-left .btns { 
 
    margin:1.5em 0; 
 
} 
 

 
.checkout-cart-2 .cart-left .btns .btn { 
 
    width:100%; 
 
    margin-bottom:1em; 
 
} 
 

 
.checkout-cart-2 .cart-right .btns a.btn { 
 
    width:100%; 
 
    margin-bottom:1em; 
 
} 
 

 
@media all and (min-width: 769px) { \t \t \t \t \t 
 
    .checkout-cart-2 .cart-right { 
 
     float:right; 
 
     width:25%; 
 
    } \t \t 
 
} 
 

 
.checkout-cart-2 .item-details .item-name { 
 
    padding-right:2.5em; 
 
} 
 

 
@media all and (min-width: 769px) { 
 
    
 
    .checkout-cart-2 .item-list .item-details { 
 
     padding-right:1em !important; 
 
    } 
 
    
 
    .checkout-cart-2 .item-details .item-name { 
 
     padding-right:3.5em; 
 
    } 
 
    
 
    .checkout-cart-2 .item-opt .item-subtotal { 
 
     float:right; 
 
     clear: right; 
 
    } \t 
 
    
 
} 
 

 
.checkout-cart-2 .item-list .actions-panel .item-actions { 
 
    text-align:left; } 
 

 
.checkout-cart-2 .item-list .item-code-notes { 
 
    padding:0; 
 
    float:left; 
 
    width:100%; 
 
} 
 

 
.checkout-cart-2 .item-list .item-actions-wrap { 
 
    padding-left:0; 
 
    padding-right:0; 
 
    padding-bottom:0; 
 
    float:left; 
 
    width:100%; 
 
} 
 

 
.checkout-cart-2 .quote-items-note { 
 
    background:#fff6c5; 
 
    border-color:#ffd800; 
 
}

<div id="cartgrid"> 
 
      <table id="cart-table"> 
 
       
 
<tbody><tr class="heading"> 
 
    <th>Product Information</th> 
 
    <th>Quantity</th> 
 
    <th>Item Price</th> 
 
    <th>Subtotal</th> 
 
    <th></th> 
 
</tr> 
 

 
     <tr class="cart-row gray" data-orderlineid="02e9151d-24b4-46ca-8e9f-a4d000adbd83"> 
 
      <td class="product-info" width="45%"> 
 
       <div class="wrap"> 
 
        <div class="small-4 columns item-thumb"><a href=""><img src="" alt="95T Achieve Treadmill"></a></div> 
 
        <div class="small-8 columns description"> 
 
         <div class="item-name"> 
 
          <a href=""> 
 
           95T Achieve Treadmill 
 
           
 
          </a> 
 
         </div> 
 
          <div class="item-num"> 
 
      <span class="item-num-sku">Product Code: 456009801</span> 
 
    </div> 
 

 
         <div class="availability"> 
 
           <span class="instock">In Stock</span> 
 

 
         </div> 
 
        </div> 
 
       </div> 
 
      </td> 
 
      <td class="quantity"> 
 
       <div class="wrap"> 
 
        <div class="item-qty"> 
 
         <input type="text" id="02e9151d-24b4-46ca-8e9f-a4d000adbd83_qty" data-qty-input="" value="3" class="numerictextbox qty txt"> 
 
        </div> 
 
        <div class="update"> 
 
         <a class="update-btn" id="02e9151d-24b4-46ca-8e9f-a4d000adbd83_update" onclick="">Update</a> 
 
        </div> 
 
       </div> 
 
      </td> 
 
      <td class="price"> 
 
       <div class="wrap"> 
 
        <div class="price"> 
 
           <span class="price">$3,599.00</span> 
 
        </div> 
 
       </div> 
 
      </td> 
 
      <td class="subtotal"> 
 
       <div class="wrap"> 
 
        <div class="price"> 
 
          <div class="item-subtotal"> 
 
$10,797.00       </div> 
 
        </div> 
 
       </div> 
 
      </td> 
 
      <td class="remove"> 
 
       <div class="wrap"> 
 
         <div class="remove"> 
 
          <a class="btn btn-remove" onclick=""> 
 
           <i class="fa fa-times"></i> 
 
          </a> 
 
         </div> 
 
       </div> 
 
      </td> 
 
     </tr> 
 
     <tr class="cart-row" data-orderlineid="01a6aefa-7bb7-4559-b4db-a4d000c95fc8"> 
 
      <td class="product-info" width="45%"> 
 
       <div class="wrap"> 
 
        <div class="small-4 columns item-thumb"><a href=""><img src="" alt="Biceps Curl"></a></div> 
 
        <div class="small-8 columns description"> 
 
         <div class="item-name"> 
 
          <a href=""> 
 
           Biceps Curl 
 
           
 
          </a> 
 
         </div> 
 
          <div class="item-num"> 
 
      <span class="item-num-sku">Product Code: 455009813</span> 
 
    </div> 
 

 
         <div class="availability"> 
 
           <span class="instock">In Stock</span> 
 

 
         </div> 
 
        </div> 
 
       </div> 
 
      </td> 
 
      <td class="quantity"> 
 
       <div class="wrap"> 
 
        <div class="item-qty"> 
 
         <input type="text" id="01a6aefa-7bb7-4559-b4db-a4d000c95fc8_qty" data-qty-input="" value="1" class="numerictextbox qty txt"> 
 
        </div> 
 
        <div class="update"> 
 
         <a class="update-btn" id="01a6aefa-7bb7-4559-b4db-a4d000c95fc8_update" onclick="">Update</a> 
 
        </div> 
 
       </div> 
 
      </td> 
 
      <td class="price"> 
 
       <div class="wrap"> 
 
        <div class="price"> 
 
           <span class="price">$149.99</span> 
 
        </div> 
 
       </div> 
 
      </td> 
 
      <td class="subtotal"> 
 
       <div class="wrap"> 
 
        <div class="price"> 
 
          <div class="item-subtotal"> 
 
$149.99       </div> 
 
        </div> 
 
       </div> 
 
      </td> 
 
      <td class="remove"> 
 
       <div class="wrap"> 
 
         <div class="remove"> 
 
          <a class="btn btn-remove" onclick=""> 
 
           <i class="fa fa-times"></i> 
 
          </a> 
 
         </div> 
 
       </div> 
 
      </td> 
 
     </tr> 
 
     <tr class="cart-row gray" data-orderlineid="2d0c2838-645a-4849-9600-a4d000c9627a"> 
 
      <td class="product-info" width="45%"> 
 
       <div class="wrap"> 
 
        <div class="small-4 columns item-thumb"><a href=""><img src="" alt="XI8 CYCLEPRO Exercise Bike"></a></div> 
 
        <div class="small-8 columns description"> 
 
         <div class="item-name"> 
 
          <a href=""> 
 
           XI8 CYCLEPRO Exercise Bike 
 
           
 
          </a> 
 
         </div> 
 
          <div class="item-num"> 
 
      <span class="item-num-sku">Product Code: LFR3995</span> 
 
    </div> 
 

 
         <div class="availability"> 
 
           <span class="instock">In Stock</span> 
 

 
         </div> 
 
        </div> 
 
       </div> 
 
      </td> 
 
      <td class="quantity"> 
 
       <div class="wrap"> 
 
        <div class="item-qty"> 
 
         <input type="text" id="2d0c2838-645a-4849-9600-a4d000c9627a_qty" data-qty-input="" value="1" class="numerictextbox qty txt"> 
 
        </div> 
 
        <div class="update"> 
 
         <a class="update-btn" id="2d0c2838-645a-4849-9600-a4d000c9627a_update" onclick="">Update</a> 
 
        </div> 
 
       </div> 
 
      </td> 
 
      <td class="price"> 
 
       <div class="wrap"> 
 
        <div class="price"> 
 
           <span class="price-sale">$1,999.99</span> 
 
           <span class="price-old">$2,199.00</span> 
 
        </div> 
 
       </div> 
 
      </td> 
 
      <td class="subtotal"> 
 
       <div class="wrap"> 
 
        <div class="price"> 
 
          <div class="item-subtotal"> 
 
$1,999.99       </div> 
 
        </div> 
 
       </div> 
 
      </td> 
 
      <td class="remove"> 
 
       <div class="wrap"> 
 
         <div class="remove"> 
 
          <a class="btn btn-remove" onclick=""> 
 
           <i class="fa fa-times"></i> 
 
          </a> 
 
         </div> 
 
       </div> 
 
      </td> 
 
     </tr> 
 

 
      </tbody></table> 
 
    </div>

Answer 2

По какой-то причине я не уверен, вам понравится мой ответ, однако добавьте следующий после строки заголовка:

<tr><td style="border-top:1px solid black;" colspan="4"></td></tr> 

где 4 - количество столбцов. Граница границы будет прекрасно игнорировать интервал между ячейками, потому что это одна ячейка.