Collapsing Border

From CSS Discuss

Jump to: navigation, search

Collapsing Table Borders

To attain the appearance of collapsed borders in a table (that is, where only a single line separates cells) requires several actions:

  • The "border-collapse" attribute of affected cells (td or th) must be set to "collapse" (vs. "separate").
  • The borders must be compatible (same color, size, etc).
  • The cells must have no margins, obviously.
  • For some browsers, you must also specify the HTML cellspacing="0" in the tag. This is because some broswers use a non-0 default, which can even override some CSS attempts.

    Example style:

    .collapsedBorders td, .collapsedBorders th {
      border-collapse: collapse;
      border: 1 px solid #333;
      margin: 0px;
    }
    

    Example markup:

    <table class="collapsedBorders" cellspacing="0">...
    

    Note: In Firefox, a table with an empty table row at the beginning of the table (i.e., a table row with no table data cell inside) will lose its borders when border-collapse is applied.


    See Also: Collapsing Margin


    Category CSSConcept
Personal tools