Applying borders to a single table cell when using border-collapse
Won't be possible using border-collapse. You could work around the problem somewhat though, for example by doing this:
<td class="special"><div>Two</div></td>
Then applying a style like this:
.special div {
border: 2px solid #f00;
margin: -2px;
}
What (hopefully) will happen is the div inside the td will expand outward by 2 pixels and cover the black border with a red border.
Change border of a single table cell element with border collapse
Inset would do the trick. Change the td border: 1px solid black; to :
td {
...
border: 1px inset black;
...
}
Updated Fiddle example
How can I get to see table cell borders if border-collapse: separate?
http://www.w3.org/TR/CSS21/tables.html
states this:
17.6 Borders
[...]
'border-collapse'
Value: collapse | separate | inherit
Initial: separate
[...] The value 'separate' selects the separated borders border model. The value 'collapse' selects the collapsing borders model. [...]17.6.1 The separated borders model
[...] Rows, columns, row groups, and column groups cannot have borders (i.e., user agents must ignore the border properties for those elements). [...]17.6.2 The collapsing border model
In the collapsing border model, it is possible to specify borders that surround all or part of a cell, row, row group, column, and column group.
You say
This doesn't seem to show borders, although that's supposed to be the only reason for the CSS property
border-collapse
It probably is indeed one reason for the existence of that property to allow borders for <tr>s - but the other way around: separated is the default-value and collapse allows you to create those borders around table-rows.
How can I have borders around the table row, but not on any inner-cells?
Unfortunately tables aren't really designed to do what you are asking.
In order to have the border around the row rather than the cell, simply shift the border rule to the #table tr selector, and also add border-collapse: collapse to the <table> element itself.
body { font-family: sans-serif;}
#table { border-collapse: collapse; border-spacing: 0.3em;}
#table tr { border: 2px solid blue;}
#table td { padding: 1em; text-align: center;}<table id="table"> <tbody> <tr> <td>this</td> <td>is</td> <td>a table</td> </tr> <tr> <td>with</td> <td>rounded</td> <td>cells</td> </tr> </tbody></table>HTML Table: Having a border on just the table header with border-collapse:separate on the table
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>How to highlight 4 borders of a table cell with border-collapse collapse
Define border-style:double. Write like this:
td.active {
border: 1px solid blue;
border-style:double;
}
Check this http://jsfiddle.net/2ahfP/18/
How can I apply a border only inside a table?
If you are doing what I believe you are trying to do, you'll need something a little more like this:
table {
border-collapse: collapse;
}
table td, table th {
border: 1px solid black;
}
table tr:first-child th {
border-top: 0;
}
table tr:last-child td {
border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
border-right: 0;
}
jsFiddle Demo
The problem is that you are setting a 'full border' around all the cells, which make it appear as if you have a border around the entire table.
EDIT: A little more info on those pseudo-classes can be found on quirksmode, and, as to be expected, you are pretty much S.O.L. in terms of IE support.
Related Topics
React Js: Apply Material-Ui CSSbaseline
How to Center an Image Within a Col Element in Bootstrap 3+
Mvc: I Have Deployed My Application, But CSS Only Works When I Log In
Change The Size /Spacing of Label Text in R Shiny Fileinput
Firefox Displaying Table-Cell Incorrectly (Chrome Working Good)
Creating Small Navbar and a Side Panel in Materialize CSS
CSS Start Repeating Background from Defined Position
How to Use Bootstrap 5 Custom Color Directly in The Class Attribute
Why Does The Overflow-Y Property Not Work with Percent Height
Remove White Space Under Footer
How to Reverse-Engineer a Webkit Matrix3D Transform
Slide Flickering with CSS Transitions
Overflow Property Returning Auto Value
CSS3 Transition - Change Animation "Anchor Point"