1

This is how I need my table to look:

enter image description here

I need to add a solid border beneath the table heading row. However, I also need to have spacing between the cells of the table. I have to use the border-collapse property on the table in order to get spacing between the gray cells, and "border-collapse: separate" prevents me from adding a bottom border to the heading row.

How can I add a solid border beneath the table header while also maintaining the spacing between the table columns?

These are the styles I have; the border-collapse style negates the border-bottom. When I remove the border-collapse, the border-bottom works.

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

table{
    border-collapse: separate;
}

Here's a fiddle: https://jsfiddle.net/8u9krzyg/

2 Answers 2

1

This answer utilizes border:collapse; plus margin and border on your <div class="wrap"> element that you have in your table cells to provide the pseudo cell borders.

EDITED: I posted another method using ::after on the th elements to span the spacing. It has better browser support.

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) { 					
    .checkout-cart-2 .cart-right  {
        float:right;
        width:25%;
    }		
}

.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;
    }	
    
}

.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>

Another Method Here is another method that uses th::after to create the border underneath the table headers. This method has better cross browser support.

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) { 					
    .checkout-cart-2 .cart-right  {
        float:right;
        width:25%;
    }		
}

.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;
    }	
    
}

.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>

5
  • that doesn't quite work, the gray background does not extend to the full height of the cell Jul 9, 2015 at 19:48
  • I have updated my answer snippet. Set .cart-row td {padding: 0;} to allow .wrap to occupy the entire cell. Added padding to #cart-table th and .wrap. Added box-sizing: border-box; to .wrap to account for the padding effect on height.
    – IMI
    Jul 9, 2015 at 20:32
  • still not getting the full height. If you run the code snippet, you'll see the heights aren't right. Jul 10, 2015 at 17:54
  • Ah ok, I see that firefox and web-kit don't agree on block level elements inside table cells. I have updated the snippet. Unfortunately it uses calc() now and will not work if you need IE8 or Opera Mini support. caniuse.com/#feat=calc
    – IMI
    Jul 10, 2015 at 18:54
  • I was not happy with the browser support for my answer. So, I posted a second solution that has much better support.
    – IMI
    Jul 13, 2015 at 12:48
1

For some reason I'm not sure you'll like my answer, however add the following after the heading row:

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

where 4 is the number of columns. The border line will nicely ignore cell spacing, because it's one cell.

1
  • the only problem with this is that the extra tr adds unwanted space between my header row and the rest of the table Jul 9, 2015 at 19:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.