Can you explain the variance between border-collapse: collapse; and border-spacing: 0;?

Are the CSS properties

border-collapse:collapse;

and

border-spacing: 0px;   /* only effective when "separate" option is used */
border-collapse:separate;

equivalent?

htmlcssborder-spacing

Answer №1

They are Not the Same! (Refer to Snippet below for verification).

Based on MDN documentation here and here

The border-collapse CSS property determines whether a table's borders are separated or collapsed. In the separated model, adjacent cells each have their own distinct borders. In the collapsed model, adjacent table cells share borders.

and

The border-spacing CSS property specifies the distance between the borders of adjacent table cells (only for the separated borders model). This is equivalent to the cellspacing attribute in presentational HTML, but an optional second value can be used to set different horizontal and vertical spacing.

The border-spacing value is also used along the outside edge of the table, where the distance between the table's border and the cells in the first/last column or row is the sum of the relevant (horizontal or vertical) border-spacing and the relevant (top, right, bottom, or left) padding on the table.

This rule is applicable only when border-collapse is set to separate.

Here is a SNIPPET with several examples

body {
  margin: 0;
  font-family: Arial;
}
table {
  width: 100%;
  margin:30px 0
}
td {
  border: 1px solid red
}
.collapse {
  border-collapse: collapse;
}
.separate {
  border-collapse: separate;
}
.no-spacing {
  border-spacing: 0
}
.spacing {
  border-spacing: 10px
}
<h4>Borders will collapse and therefore no space between them</h4>
<table class="collapse no-spacing">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<h4>Borders will try to separate between them but then using border-spacing:0 will join the borders without collapsing (looking like has double borders)</h4>
<table class="separate no-spacing">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<hr />

<h3> 2 more examples </h3>
<h4>Border-spacing won't work due to only applies when border-collapse isset to separate</h4>
<table class="collapse spacing">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<hr />
<h4>Borders will separate between them due to having border-spacing:10px and because border-collapse has separate as initial value</h4>
<table class="spacing">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Eliminating bottom section in HTML/CSS

I've got this code snippet: new WOW().init(); /* AUTHOR LINK */ $('.about-me-img img, .authorWindowWrapper').hover(function() { $('.authorWindowWrapper').stop().fadeIn('fast').find('p').addClass('tr ...

javascripthtmlcssanimation

Manage the sequence in which the various paths of an SVG element are displayed

Searching for a way to display an image in HTML with a rounded dashed border? Take a look at the example below: https://i.sstatic.net/YrCZS.png The number of dashes and their colors can be controlled, similar to what you see in WhatsApp's status tab ...

javascripthtmlcsssvg

Whenever I minimize the screen, certain column text is unable to be seen within the Td element

I have incorporated an HTML table inside a responsive-table div tag. In the numeric column of the table, there are decimal numbers. However, when I reduce the page size to fit smaller screens, some parts of the numeric values become invisible. The visibili ...

htmlasp.net-mvcbootstrap-4

What is the method for determining the gaps between cells in a grid-based puzzle game similar to Sudoku?

this is my current code and it's successfully functioning var cellSize:Number = 36; var cellGap:Number = 4; var row:Number; var col:Number; for (var a:int = 0 ; a < puzzleSTR.length ; a++) { col = a % 9; row = Math.floor(a / 9); ...

javascripthtmlactionscript-3game-developmentstarling-framework

What is the best way for a background-image to determine its height in CSS?

I am currently working on a website project and I would like to include my title using a background-image because it uses a unique font. In my design class, we were taught that this is the best approach. However, I am struggling with setting the correct di ...

htmlimagecss

Improving iframe functionality in AngularJS

I've been experimenting with AngularJS to dynamically update an iframe whenever a query is triggered. It works like this: a query is made, the embed link is fetched from the database, and then it's used in the iframe alongside the title and video ...

javascriptjqueryhtmlangularjsiframe

Looking for assistance with aligning UL elements in CSS using absolute positioning for a dropdown effect

I'm currently working on implementing a language switching feature on this website. The concept involves using a SPAN element that reveals a dropdown box (based on UL) containing a list of available languages when hovered over. Below is a preview of t ...

csslisthtmldrop-down-menupositioning

Accordion content from MUI gets cut off by bookmark bar when expanded

How can I prevent an MUI accordion in an appBar from moving up and hiding behind the browser's bookmark bar when expanded? const useStyles = makeStyles((theme)) => { appBar: { borderBottom: "2px solid #D2D2D2", backgro ...

javascriptcssreactjsmaterial-ui

Graphical representation in the body of an email using bar graphs

Can a dynamic bar graph be created in an email message? It should be compatible with Outlook. I want to include a graph in an email sent using oracle database, where the dynamic values will be passed through a procedure. ...

csshtmlhtml-emailbar-chart

Ways to implement a setTimeout function to return to the initial div element?

I have a unique setup on my webpage with three divs. The first div features an html5 video, the second div contains buttons for interaction, and the third div acts as a thank you page that loops back to the beginning like a photo slide. I have shared my co ...

javascripthtmljqueryjquery-events

Tips for retrieving text without a class or id using selenium and python

I am attempting to extract a list of variables (date, size, medium, etc.) from the following webpage using python/selenium: Getting the titles was straightforward with: titles = driver.find_elements_by_class_name("sln_lot_show") for title in titles ...

pythonhtmlseleniumselenium-webdriverweb-scraping

Is there a way to adjust the margin widths between specific columns without causing them to wrap onto a new line? I need to maintain a total of 12 columns

Check out this JSFiddle link for the code. I am trying to adjust the vertical margin width between specific columns. I attempted to add a margin between my col-xs-4 and col-lg-4 by using mr-4. <div class="container-fluid"> <di ...

htmlcsstwitter-bootstrap-3bootstrap-4

Select two out of the three links from a repeating HTML structure using JQuery

Having difficulty creating an efficient jQuery selector to choose 2 out of 3 existing a elements within a repeating HTML structure. Below is the code snippet. The goal is to select Link 1, Link 2, excluding Link 3. Keep in mind that the entire HTML struct ...

jquerycssjquery-selectors

JavaScript - Retrieving the variable's name

Whenever I invoke a function in JavaScript with a variable, like this: CheckFunction(MyVariable); CheckFucntion(MyVariable2); Suppose I have a function that checks if the input is a number: function CheckFunction(SOURCE){ //THE CODE ITSELF }; I want to ...

javascripthtmlvariables

The menu header is experiencing issues with alignment

I've been tackling the alignment of elements in my menu header, but for some reason, they're not lining up horizontally as intended. Instead, they are stacked below each other. Here's the link to my jsfiddle Here's a snippet of my HTML ...

javascriptjqueryhtmlcss

New to the game: validating JavaScript forms on the go

I recently developed a form that requires JavaScript validation. Despite referencing a post about inline JavaScript form validation on Stack Overflow, I struggled to replicate the desired outcomes. To aid in troubleshooting, I have set up a JSBin link tha ...

javascripthtml

"Enhancing CSS width using jQuery: A concise guide to increasing the current width with

I have a project involving a meter that changes based on decision outcomes. To achieve this, I am adjusting the width percentage using jQuery and CSS. Currently, I can set it to a specific percent, but I need help in adding or subtracting a percentage fr ...

jqueryhtmlcsspercentage

"Enhance Your Design with Hovering CSS Backgrounds

Seeking assistance with changing the background image on span hover. If anyone can assist, I have included the complete code for the website below. Take a look at the full website code here: Pastebin CSS Pastebin JavaScript ...

javascriptcss

How can I position the title above the navigation links in a Bootstrap navbar?

Is there a way to position a bootstrap header above the bootstrap navigation menu? I envision an initial 250px height header with the nav-brand placed above the nav menu, both centered. As the user scrolls, the header should shrink to match the default boo ...

cssnavbarcenternavtwitter-bootstrap-4

Styling a mat-tab element is not possible without utilizing the combination of ::ng-deep and

I'm facing a challenge with styling components that use mat-tab elements in my HTML. Currently, I can only style them using ::ng-deep .mat-tab-label {} and adding !important to at least one of the styles. However, I don't want to rely on this sol ...

htmlcssangularelement