Grow your CSS skills. Land your dream job.

border-collapse

Last updated on:

The border-collapse property is for use on <table> elements (or elements made to behave like a table through display: table or display: inline-table). There are two values:

  • separate (default) - in which all table cells have their own independent borders and there may be space between those cells as well.
  • collapse - in which both the space and the borders between table cells collapse so there is only one border and no space between cells.
table {
  border-collapse: separate; /* Or do nothing, this is default */
  border-spacing: 3px; /* Only works if border-collapse is separate */
}
separate
table {
  border-collapse: collapse;
}
collapse

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Works Works Works Works Works Works Works

Comments

  1. jana
    Permalink to comment#
  2. Permalink to comment#

    You wrote:
    /* Or do nothing, this is default */ on both CSS examples
    Didn’t understand.

  3. Simple but very usefull thing to work with tables. Btw. nice idea with this almanac :)

  4. Kiefer
    Permalink to comment#

    I used this and it did exactly what I was looking for to fix an IE9 issue but it took away my box-shadow. Any idea how to get the best of both of these?

    Thanks!
    Kiefer

  5. Hello,

    I use #wrap { display:table;border-collapse: collapse; border:1px solid #cccc},

    So how can I get the border to be complete?

    I created a jsfiddle with my complete code (except for the images). http://jsfiddle.net/qHVk3/

    Thank you

  6. So border-collapse more or less hides the top border… which means if you want to ‘highlight’ a row by changing the border colors, you must change the border-bottom of both the row that you want highlighted and the previous row… which very unfortunately rules out CSS to accomplish this… at least for now, until ‘!’ gets added to modern browsers.

  7. Actually, I got the highlight effect to work with box-shadow:
    tr:hover td { position: relative; box-shadow: 0px 0px 1px #333; }

  8. I found it odd that the border-spacing shorthand syntax is left/right and then top/bottom as opposed to the seemingly standard box-model shorthands of top/bottom and then left/right. Rather this one uses the ‘x-axis’ and ‘y-axis’ values like background-position or the like. Might be worth noting in the example code.

    For an example of what I’m talking about: http://codepen.io/arsdehnel/pen/cqjBs

  9. Hi, I am using a mobile responsive free WordPress theme that some how removes the table border of any HTML table. I tried to specify the border in this way

    <

    table class=”aligncenter” border=”1″ cellspacing=”1″ cellpadding=”1″ align=”center”>

    in posts, still, the border is now showing up.

    I found the following code in the source code or rather in the styles.css file

    table {
    border-collapse: collapse;
    }

    I tried to override that with

    table {
    border-collapse: separate;
    border-spacing: 1px;
    }

    But it’s not working. Would you please tell me what’s exact reason behind this.
    Thanks in advance!

  10. Awesome, just what I was looking for!

  11. Permalink to comment#

    There is an issue with border-collapse: collapse that has a rowspan on Firefox. The URL for the bug is at https://bugzilla.mozilla.org/show_bug.cgi?id=332740

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".