HTML 表格：仅在表格标题上有边框，边框折叠：在表格上分开
Posted
技术标签:
【中文标题】HTML 表格：仅在表格标题上有边框，边框折叠：在表格上分开【英文标题】：HTML Table: Having a border on just the table header with border-collapse:separate on the table 【发布时间】：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/
【问题讨论】：
【参考方案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" >
<div class="wrap">
<div class="small-4 columns item-thumb"><a href=""><img src="" ></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" >
<div class="wrap">
<div class="small-4 columns item-thumb"><a href=""><img src="" ></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" >
<div class="wrap">
<div class="small-4 columns item-thumb"><a href=""><img src="" ></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" >
<div class="wrap">
<div class="small-4 columns item-thumb"><a href=""><img src="" ></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" >
<div class="wrap">
<div class="small-4 columns item-thumb"><a href=""><img src="" ></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" >
<div class="wrap">
<div class="small-4 columns item-thumb"><a href=""><img src="" ></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 在我的标题行和表格的其余部分之间添加了不需要的空间以上是关于HTML 表格：仅在表格标题上有边框，边框折叠：在表格上分开的主要内容，如果未能解决你的问题，请参考以下文章