index.html

--- layout: single property_name: border-collapse ---<section id="border-collapse" class="property"><header class="property-header"><nav class="property-links"><a class="property-links-direct" href="{{site.url}}/property/border-collapse/" data-property-name="border-collapse" data-tooltip="Single page for this property" target="_blank">Link</a> <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="border-collapse">Share</a> <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/border-collapse" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a></nav><h2 class="property-name"><a href="{{site.url}}/#border-collapse"><span>#</span>border-collapse</a></h2><div class="property-description"><p>Defines whether <strong>table</strong> borders should be separated or collapsed.</p></div></header><style type="text/css">.border-collapse table { width: 100%; }.border-collapse td { border-bottom: 4px solid hsl(348, 100%, 61%);border-left: 4px solid #05ffb0;border-right: 4px solid hsl(48, 100%, 67%);border-top: 4px solid hsl(217, 71%, 53%);padding: 0.4em 0.5em; }</style><section class="example"><header class="example-header"><p class="example-name"><code class="example-default" data-tooltip="This is the property's default value">default</code> <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="border-collapse: separate;">border-collapse: separate;</code></p><div class="example-description"><p>Each table <strong>cell</strong> will display its own borders.</p><p>In this example, each cell has a <code>border-width</code> of <strong>4px</strong>. As a result, the border between <em>two</em> cells will be <strong>8px</strong>.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div border-collapse" id="border-collapse-separate"><table><tr><td><strong>Name</strong></td><td><strong>Instrument</strong></td></tr><tr><td>John Lennon</td><td>Rhythm Guitar</td></tr><tr><td>Paul McCartney</td><td>Bass</td></tr><tr><td>George Harrison</td><td>Lead Guitar</td></tr><tr><td>Ringo Starr</td><td>Drums</td></tr></table></div></div></aside><style type="text/css">#border-collapse-separate{ border-collapse:separate;}</style><style type="text/css">#border-collapse-separate table { border-collapse: separate; }</style></section><section class="example"><header class="example-header"><p class="example-name"><code class="example-value" data-tooltip="Click to copy" data-clipboard-text="border-collapse: collapse;">border-collapse: collapse;</code></p><div class="example-description"><p>Adjacent table cells will <strong>merge</strong> their borders together.</p><p>The cell that appears <em>first</em> in the code will &quot;win&quot;: its borders will <em>mask</em> those of the following cells.</p></div></header><aside class="example-preview"><div class="example-browser"><i></i><i></i><i></i></div><div class="example-output"><div class="example-output-div border-collapse" id="border-collapse-collapse"><table><tr><td><strong>Name</strong></td><td><strong>Instrument</strong></td></tr><tr><td>John Lennon</td><td>Rhythm Guitar</td></tr><tr><td>Paul McCartney</td><td>Bass</td></tr><tr><td>George Harrison</td><td>Lead Guitar</td></tr><tr><td>Ringo Starr</td><td>Drums</td></tr></table></div></div></aside><style type="text/css">#border-collapse-collapse{ border-collapse:collapse;}</style><style type="text/css">#border-collapse-collapse table { border-collapse: collapse; }</style></section></section>