表格边框重叠与间距

在网页里使用表格时，一定会设定“边框”，除了基本边框样式属性，表格元素也有自己特有的边框样式属性，这篇教学会介绍 border-collapse 控制边框的重叠和分离，以及 border-spacing 设定边框间距。

快速导览：

• border-collapse 边框重叠
• 边框重叠的优先级
• border-spacing 边框间距

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

border-collapse 边框重叠

border-collapse 是专属显示类型为 table 或 inline-table 的样式属性，且必须设定在 table 元素才有作用，具有继承特性，这个样式属性可以控制表格里每个储存格边框的“重叠”或“分离”，属性值说明如下：

下方范例会呈现不同 border-collapse 属性值的表格 ( 有额外设定表格边框样式 )，从中可以注意到，table 本身也可以设定边框，如果处于边框重叠样式状态，table 的边框也会与 td 重叠而合并成单一边框，且会忽略 padding 的设定。

线上展示：https://codepen.io/oxxo/pen/wvLOrGJ

<!-- HTML 程式碼 -->
<table class="a">
  <tr><td>apple</td><td>oxxo</td></tr>
  <tr><td>banana</td><td>papaya</td></tr>
</table>
<table class="b">
  <tr><td>apple</td><td>oxxo</td></tr>
  <tr><td>banana</td><td>papaya</td></tr>
</table>

<!-- CSS 程式碼 -->
<style>
  table {
    border: 1px solid #000;
    margin: 10px;
    padding: 10px;
  }
  td {
    border: 1px solid #000;
    padding: 10px;
  }
  .a {border-collapse: collapse;}
  .b {border-collapse: separate;}
</style>

边框重叠的优先级

有别于表格里各个元素有“阶层”之分，边框重叠时也有顺序之分，下方列出重叠时采用边框样式的权重，权重从上到下，越上方权重越高，就会优先显示。

• 边框样式设定为 hidden，所有重叠的边框都会被隐藏。
• 宽度大的边框优先显示。
• 边框样式权重顺序：double > solid > dashed > dotted > ridge > outset > groove > inset > none。
• 如果上述都相同，边框颜色会按照表格各个元素的阶层排列，参考“表格元素排列阶层”。

下方范例使用四个 div，分别代表边框重叠时的四种权重表现。

线上展示：https://codepen.io/oxxo/pen/poXYWya

<!-- HTML 程式碼 -->
<table class="a">
  <tr><td>apple</td><td>oxxo</td></tr>
  <tr><td>banana</td><td>papaya</td></tr>
</table>
<table class="b">
  <tr><td>apple</td><td>oxxo</td></tr>
  <tr><td>banana</td><td>papaya</td></tr>
</table>
<table class="c">
  <tr><td>apple</td><td>oxxo</td></tr>
  <tr><td>banana</td><td>papaya</td></tr>
</table>
<table class="d">
  <tr><td>apple</td><td>oxxo</td></tr>
  <tr><td>banana</td><td>papaya</td></tr>
</table>

<!-- CSS 程式碼 -->
<style>
  table {
    margin: 10px;
    padding: 10px;
    border-collapse: collapse;
  }
  td {
    border: 3px dashed red;
    padding: 10px;
  }
  .a {border: hidden;}            /* 重疊部分隱藏 */
  .b {border: 5px dotted blue;}   /* 重疊部分使用 5px 粗的這組邊框樣式 */
  .c {border: 3px solid green;}   /* 重疊部分使用 solid 的這組邊框樣式 */
  .d {border: 3px dashed green;}  /* 重疊部分使用 td 的邊框樣式，因為 td 權重比 table 高 */
 </style>

如果在重叠边框的状态下，设定不同 td 的边框，也可以因为权重所产生的重叠效果，例如正中间的储存格就不会有边框，因为设定 hidden 的权重最大。

线上展示：https://codepen.io/oxxo/pen/abgMLNX

<!-- HTML 程式碼 -->
<table>
  <tr>
    <td class="a">A</td>
    <td class="b">B</td>
    <td class="c">C</td>
  </tr>
  <tr>
    <td class="i">I</td>
    <td class="j">J</td>
    <td class="k">K</td>
  </tr>
  <tr>
    <td class="x">X</td>
    <td class="y">Y</td>
    <td class="z">Z</td>
  </tr>
</table>

<!-- CSS 程式碼 -->
<style>
  table {
    margin: 10px;
    padding: 10px;
    border-collapse: collapse;
  }
  td {padding: 10px 20px;}
  .a {border: 10px dashed red;}
  .b {border: 5px solid orange;}
  .c {border: 5px dotted green;}
  .i {border: 10px solid cyan;}
  .j {border: hidden;}
  .k {border: 10px dotted pink;}
  .x {border: 5px solid black;}
  .y {border: 10px dashed gray;}
  .z {border: 10px double blue;}
 </style>

border-spacing 边框间距

border-spacing 是专属显示类型为 table 或 inline-table 的样式属性，且必须设定在 table 元素才有作用，具有继承特性，这个样式属性可以控制表格里“储存格边框与边框”之间的“间距”，间距会从边框外缘延伸出去，border-spacing 支援所有长度单位，通常使用绝对长度 px 作为单位。

注意，表格储存格元素并不支援 margin 外边界的样式属性，需要使用 border-spacing 设定间隔。

在没有设定 border-spacing 且 border-collapse:separate 的状态下，表格里每个储存格默认采用 2px 的间距，设定后就会按照设定值进行间隔，下方范例将表格设定为 border-spacing:10px。

线上展示：https://codepen.io/oxxo/pen/VwJRMjw

<!-- HTML 程式碼 -->
<table>
  <tr><td>apple</td><td>oxxo</td></tr>
  <tr><td>banana</td><td>orange</td></tr>
</table>

<!-- CSS 程式碼 -->
<style>
  table {
    border: 20px solid #000;
    padding: 20px;
    border-spacing: 20px;
  }
  td {
    border: 20px solid #000;
    width: 120px;
    height: 100px;
    background: orange;
  }
 </style>

border-spacing 支援“两个数值”的属性值，使用一个数值表示上下左右都是同样间距，使用两个数值表示“左右、上下”间距，下方范例将刚刚的程序码改成两个数值，就能清楚看到上下的间距变成 5px，左右仍然维持 20px。

table {
  border: 20px solid #000;
  padding: 20px;
  border-spacing: 20px 5px;  /* 左右 20px，上下 5px */
}

td {
  border: 20px solid #000;
  width: 120px;
  height: 100px;
  background: orange;
}

小结

表格的边框虽然与一般网页元素的边框大同小异，但又具有自己专属的设定样式，特别是重叠与分开的特性，有时会让初学者不容易掌握，透过这边教学的介绍，应该就能对表格边框有更深一层的认识。

意见反馈