border-collapse
Quick Summary for border-collapse
The border-collapse CSS property sets whether cells inside a <table> have shared or separate borders.
Code Usage for border-collapse
/* Keyword values */ border-collapse: collapse; border-collapse: separate;  /* Global values */ border-collapse: inherit; border-collapse: initial; border-collapse: revert; border-collapse: unset; 
More Details for border-collapse

border-collapse

The border-collapse CSS property sets whether cells inside a <table> have shared or separate borders.

When cells are collapsed, the border-style value of inset behaves like groove, and outset behaves like ridge.

When cells are separated, the distance between cells is defined by the border-spacing property.

Syntax

/* Keyword values */ border-collapse: collapse; border-collapse: separate;  /* Global values */ border-collapse: inherit; border-collapse: initial; border-collapse: revert; border-collapse: unset; 

The border-collapse property is specified as a single keyword, which may be chosen from the list below.

Values

collapse

Adjacent cells have shared borders (the collapsed-border table rendering model).

separate

Adjacent cells have distinct borders (the separated-border table rendering model).

Formal definition

Initial valueseparate
Applies totable and inline-table elements
Inheritedyes
Computed valueas specified
Animation typediscrete

Formal syntax

collapse | separate

Examples

A colorful table of browser engines

HTML
<table class="separate">   <caption><code>border-collapse: separate</code></caption>   <tbody>     <tr><th>Browser</th> <th>Layout Engine</th></tr>     <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td></tr>     <tr><td class="ed">Edge</td> <td class="tr">EdgeHTML</td></tr>     <tr><td class="sa">Safari</td> <td class="wk">Webkit</td></tr>     <tr><td class="ch">Chrome</td> <td class="bk">Blink</td></tr>     <tr><td class="op">Opera</td> <td class="bk">Blink</td></tr>   </tbody> </table> <table class="collapse">   <caption><code>border-collapse: collapse</code></caption>   <tbody>     <tr><th>Browser</th> <th>Layout Engine</th></tr>     <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td></tr>     <tr><td class="ed">Edge</td> <td class="tr">EdgeHTML</td></tr>     <tr><td class="sa">Safari</td> <td class="wk">Webkit</td></tr>     <tr><td class="ch">Chrome</td> <td class="bk">Blink</td></tr>     <tr><td class="op">Opera</td> <td class="bk">Blink</td></tr>   </tbody> </table> 
CSS
.collapse {   border-collapse: collapse; }  .separate {   border-collapse: separate; }  table {   display: inline-table;   margin: 1em;   border: dashed 5px; }  table th, table td {   border: solid 3px; }  .fx { border-color: orange blue; } .gk { border-color: black red; } .ed { border-color: blue gold; } .tr { border-color: aqua; } .sa { border-color: silver blue; } .wk { border-color: gold blue; } .ch { border-color: red yellow green blue; } .bk { border-color: navy blue teal aqua; } .op { border-color: red; } 
Result

Specifications

Specification
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification # propdef-border-collapse

See also

border-spacing, border-style The border-collapse property alters the appearance of the <table> HTML element. Select your preferred language English (US)DeutschEspañolFrançais日本語한국어Polski中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

You could also follow me on twitter. I have a couple of youtube channels if you want to see some video related content. RuneScape 3, Minecraft and also a coding channel here Web Dev.

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
In this case my anchor this week becomes driving almost 2hrs outside of Atlanta to one of my favorite hard core gyms in the world.. MetroFlex aka The Dungeon. The gym owners turn the heat way up so it becomes a fun sweat box and the gym members just watch from afar and leave me alone. I happily drive myself long distances to find MY ANCHOR. Our anchor allows us to have balance, focus and be as productive as possible. And if you're in the middle of a heavy set and your headphones start to fall off your head, like mine did here.. well.. f*ck the headphones. Let em break and fall. You can always get a new pair, but the iron ain't ever gonna lift itself.
Unknown
Random CSS Property

unset

The unset CSS keyword resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not. In other words, it behaves like the inherit keyword in the first case, when the property is an inherited property, and like the initial keyword in the second case, when the property is a non-inherited property.
unset css reference