HTML 表格：仅在表格标题上有边框，边框折叠：在表格上分开

【问题标题】：HTML Table: Having a border on just the table header with border-collapse:separate on the tableHTML 表格：仅在表格标题上有边框，边框折叠：在表格上分开
【发布时间】：2015-09-28 04:03:44
【问题描述】：

这就是我需要我的桌子的样子：

我需要在表格标题行下方添加一个实心边框。但是，我还需要在表格的单元格之间留出间距。我必须使用表格上的border-collapse 属性来获得灰色单元格之间的间距，并且“border-collapse:separate”会阻止我向标题行添加底部边框。

如何在表格标题下方添加实心边框，同时保持表格列之间的间距？

这些是我的风格；边框折叠样式否定边框底部。当我删除边框折叠时，边框底部起作用。

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

table{
    border-collapse: separate;
}

这是一个小提琴： https://jsfiddle.net/8u9krzyg/

【问题讨论】：

    标签： html css border css-tables


    【解决方案1】：

    此答案利用border:collapse; 加上您在表格单元格中的<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">$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) { 					
    .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>

    【讨论】：

    • 那不太行，灰色背景没有延伸到单元格的整个高度
    • 我已经更新了我的答案 sn-p。设置.cart-row td {padding: 0;} 允许.wrap 占据整个单元格。为#cart-table th 和.wrap 添加了填充。将 box-sizing: border-box; 添加到 .wrap 以说明填充对高度的影响。
    • 仍然没有得到完整的高度。如果你运行代码 sn -p，你会发现高度不对。
    • 啊，好吧，我看到 firefox 和 web-kit 不同意表格单元格内的块级元素。我已经更新了sn-p。不幸的是，它现在使用calc()，如果您需要 IE8 或 Opera Mini 支持，它将无法工作。 caniuse.com/#feat=calc
    • 我对浏览器对我的回答的支持不满意。所以，我发布了第二个解决方案，它有更好的支持。
    【解决方案2】：

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

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

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

    【讨论】：

    • 唯一的问题是额外的 tr 在我的标题行和表格的其余部分之间添加了不需要的空间
    猜你喜欢
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode