HTML Table：仅在 table header 上设置边框，在 border-collapse 上分隔：在 table 上分隔

Question

这就是我需要 table 的样子：

我需要在 table 标题行下方添加实线边框。但是，我还需要 table 的单元格之间有间距。我必须在 table 上使用 border-collapse 属性以获得灰色单元格之间的间距，并且 "border-collapse: separate" 阻止我向标题行添加底部边框。

如何在 table header 下方添加实线边框，同时保持 table 列之间的间距？

这些是我的风格； border-collapse 样式否定了 border-bottom。当我删除 border-collapse 时，border-bottom 有效。

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

table{
    border-collapse: separate;
}

这是一个 fiddle： https://jsfiddle.net/8u9krzyg/

Answer 1

出于某种原因，我不确定您是否会喜欢我的回答，但请在标题行后添加以下内容：

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

其中 4 是列数。边框线会很好地忽略单元格间距，因为它是一个单元格。

Answer 2

此答案利用 border:collapse; 加上 table 单元格中 <div class="wrap"> 元素的边距和边框来提供伪单元格边框。

已编辑：我发布了另一种在第 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: 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">,599.00</span>
                    </div>
                </div>
            </td>
            <td class="subtotal">
                <div class="wrap">
                    <div class="price">
                            <div class="item-subtotal">
,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">9.99</span>
                    </div>
                </div>
            </td>
            <td class="subtotal">
                <div class="wrap">
                    <div class="price">
                            <div class="item-subtotal">
9.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">,999.99</span>
                                <span class="price-old">,199.00</span>
                    </div>
                </div>
            </td>
            <td class="subtotal">
                <div class="wrap">
                    <div class="price">
                            <div class="item-subtotal">
,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 在 table headers 下方创建边框的方法。这种方法有更好的跨浏览器支持。

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">,599.00</span>
                    </div>
                </div>
            </td>
            <td class="subtotal">
                <div class="wrap">
                    <div class="price">
                            <div class="item-subtotal">
,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">9.99</span>
                    </div>
                </div>
            </td>
            <td class="subtotal">
                <div class="wrap">
                    <div class="price">
                            <div class="item-subtotal">
9.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">,999.99</span>
                                <span class="price-old">,199.00</span>
                    </div>
                </div>
            </td>
            <td class="subtotal">
                <div class="wrap">
                    <div class="price">
                            <div class="item-subtotal">
,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>

HTML Table：仅在 table header 上设置边框，在 border-collapse 上分隔：在 table 上分隔

HTML Table: Having a border on just the table header with border-collapse:separate on the table

html

css

border

css-tables