29. Tables: the Collapsing Border Model

• The table declaration border-collapse: collapse collapses adjacent borders into one.
• When borders with different styles collapse:
  • If one of the borders has border-style: hidden, no border is displayed.
  • Otherwise, the general rule is that the "stronger" border is chosen.
  • If border styles differ only in color, the precedence is the same as for backgrounds: cells, rows, row groups, columns, column groups, table.
  • IE ignores many of these rules, and ignores borders on column/row groups.
• Example:

  1	2	3	4
  5	6	7	8
  9	10	11	12
  13	14	15	16

  <style>
      table     { border-collapse: collapse; 
                  border: 8px solid cyan; } 
      td        { border: 2px solid red; padding: 1ex; } 
      col#col2  { border: 4px solid black; } 
      td#cell7  { border: 8px dotted blue; } 
      td#cell8  { border: 8px solid magenta; }
      td#cell14 { border-left: hidden; }
  </style>
   
  <TABLE>
      <COL id="col1"><COL id="col2"><COL id="col3"><COL id="col4"> 
      <TR> <TD> 1 <TD> 2 <TD> 3 <TD> 4
      <TR> <TD> 5 <TD> 6 <TD id="cell7"> 7 <TD id="cell8"> 8
      <TR> <TD> 9 <TD>10 <TD>11 <TD> 12
      <TR> <TD>13 <TD id="cell14">14 <TD>15 <TD> 16
  </TABLE>