CSS Table 表格

HTML Table Border 表格的 CSS 样式设计可以让网页更加美观和容易阅读。设计 HTML 表格的样式，取决于设计者的需求和风格，透过 CSS 就不需要在 HTML 内用到 border, cellpadding, cellspacing 的属性。

CSS 属性使用 border-collapse 可以代替 cellspacing=0 的宣告。CSS 中的 border-collapse : collapse || separate 可以设置表格的边框是否被「合併」成一个边框。

collapse 表格边框和单元格之间的空间会被合併，表格边框和单元格的边框会重叠在一起，形成连续的边框。

separate 表格边框和单元格之间的空间会分开，即表格边框和单元格的边框会分开，形成独立的边框。

border-collapse: collapse

设置表格的边框被合併成一个边框

Table Caption TB_COLLAPSE
TH Header	TH Header	TH Header
TF foot	TF foot	TF foot
row 1	row 1	row 1
row 2	row 2	row 2

HTML

<table class="TB_COLLAPSE">
  <caption>Table Caption TB_COLLAPSE</caption>
  <thead>
    <tr>
      <th>TH Header</th>
      <th>TH Header</th>
      <th>TH Header</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>TF foot</td>
      <td>TF foot</td>
      <td>TF foot</td>
    </tr>
  </tfoot>
  <tr>
    <td>row 1</td>
    <td>row 1</td>
    <td>row 1</td>
  </tr>
  <tr>
    <td>row 2</td>
    <td>row 2</td>
    <td>row 2</td>
  </tr>
</table>

CSS

table.TB_COLLAPSE {
  width:100%;
  border-collapse:collapse;
}
table.TB_COLLAPSE caption {
  padding:10px;
  font-size:24px;
  background-color:#f3f6f9;
}
table.TB_COLLAPSE thead th {
  padding:5px 0px;
  color:#fff;
  background-color:#915957;
}
table.TB_COLLAPSE tbody td {
  padding:5px 0px;
  color:#555;
  text-align:center;
  background-color:#fff;
  border-bottom:1px solid #915957;
}
table.TB_COLLAPSE tfoot td {
  padding:5px 0px;
  text-align:center;
  background-color:#d6d6a5;
}

border-collapse: separate

Table Caption TB_SEPARATE
TH Header	TH Header	TH Header
TF foot	TF foot	TF foot
row 1	row 1	row 1
row 2	row 2	row 2

CSS

table.TB_SEPARATE {
  width:100%;
  border-collapse:separate; /*边框没有合併*/
}