border-collapse

åºçº¿ å¹¿æ³å¯ç¨

å°è¯ä¸ä¸

border-collapse: collapse;

border-collapse: separate;

<section class="default-example" id="default-example">
  <table class="transition-all" id="example-element">
    <tr>
      <td>Cell 1.1</td>
      <td>Cell 1.2</td>
    </tr>
    <tr>
      <td>Cell 2.1</td>
      <td>Cell 2.2</td>
    </tr>
    <tr>
      <td>Cell 3.1</td>
      <td>Cell 3.2</td>
    </tr>
  </table>
</section>

table {
  width: 15rem;
  table-layout: fixed;
}

td {
  border: 5px solid;
  border-color: crimson dodgerblue orange limegreen;
  padding: 0.75rem;
}

åå¹¶ï¼collapsedï¼æ¨¡å¼ä¸ï¼è¡¨æ ¼ä¸ç¸é»ååæ ¼å±äº«è¾¹æ¡ãå¨è¿ç§æ¨¡å¼ä¸ï¼CSS å±æ§border-style çå¼ inset è¡¨ç°ä¸ºæ§½ï¼å¼ outset è¡¨ç°ä¸ºèã

åéï¼*separatedï¼*æ¨¡å¼æ¯ HTML è¡¨æ ¼çä¼ ç»æ¨¡å¼ãç¸é»ååæ ¼é½æ¥æä¸åçè¾¹æ¡ãè¾¹æ¡ä¹é´çè·ç¦»æ¯éè¿ CSS å±æ§ border-spacing æ¥ç¡®å®çã

è¯æ³

css

/* Keyword values */
border-collapse: collapse;
border-collapse: separate;

/* Global values */
border-collapse: inherit;
border-collapse: initial;
border-collapse: unset;

å¼

collapse: ç¸é»çååæ ¼å±ç¨åä¸æ¡è¾¹æ¡ï¼éç¨ collapsed-border è¡¨æ ¼æ¸²ææ¨¡åï¼ã
separate: é»è®¤å¼ãæ¯ä¸ªååæ ¼æ¥æç¬ç«çè¾¹æ¡ï¼éç¨ separated-border è¡¨æ ¼æ¸²ææ¨¡åï¼ã

æ£å¼è¯æ³

border-collapse = 
  separate  |
  collapse

ç¤ºä¾

åä¸ªæµè§å¨å¼æçå¤å½©è¡¨æ ¼

HTML

html

<table class="separate">
  <caption>
    <code>border-collapse: separate</code>
  </caption>
  <tbody>
    <tr>
      <th>Browser</th>
      <th>Layout Engine</th>
    </tr>
    <tr>
      <td class="fx">Firefox</td>
      <td class="gk">Gecko</td>
    </tr>
    <tr>
      <td class="ed">Edge</td>
      <td class="tr">EdgeHTML</td>
    </tr>
    <tr>
      <td class="sa">Safari</td>
      <td class="wk">Webkit</td>
    </tr>
    <tr>
      <td class="ch">Chrome</td>
      <td class="bk">Blink</td>
    </tr>
    <tr>
      <td class="op">Opera</td>
      <td class="bk">Blink</td>
    </tr>
  </tbody>
</table>
<table class="collapse">
  <caption>
    <code>border-collapse: collapse</code>
  </caption>
  <tbody>
    <tr>
      <th>Browser</th>
      <th>Layout Engine</th>
    </tr>
    <tr>
      <td class="fx">Firefox</td>
      <td class="gk">Gecko</td>
    </tr>
    <tr>
      <td class="ed">Edge</td>
      <td class="tr">EdgeHTML</td>
    </tr>
    <tr>
      <td class="sa">Safari</td>
      <td class="wk">Webkit</td>
    </tr>
    <tr>
      <td class="ch">Chrome</td>
      <td class="bk">Blink</td>
    </tr>
    <tr>
      <td class="op">Opera</td>
      <td class="bk">Blink</td>
    </tr>
  </tbody>
</table>

CSS

css

.collapse {
  border-collapse: collapse;
}
.separate {
  border-collapse: separate;
}
table {
  display: inline-table;
  margin: 1em;
  border: dashed 6px;
  border-width: 6px;
}
table th,
table td {
  border: solid 3px;
}
.fx {
  border-color: orange blue;
}
.gk {
  border-color: black red;
}
.ie {
  border-color: blue gold;
}
.tr {
  border-color: aqua;
}
.sa {
  border-color: silver blue;
}
.wk {
  border-color: gold blue;
}
.ch {
  border-color: red yellow green blue;
}
.bk {
  border-color: navy blue teal aqua;
}
.op {
  border-color: red;
}