table表格两种边框设置方法演示页面

展示

代码

• HTML：

  <h4 class="fill">cellspacing边框</h4>
  <table class="table-1" width="300" cellspacing="1" cellpadding="10">
    <tr>
      <th>特性</th>
      <th>支持</th>
    </tr>
    <tr>
      <td>不影响table尺寸</td>
      <td>√</td>
    </tr>
    <tr>
      <td>支持渐变边框</td>
      <td>√</td>
    </tr>
  </table>
  
  <h4 class="fill">td、th边框</h4>
  <table class="table-2" width="300" cellpadding="10">
    <tr>
      <th>特性</th>
      <th>支持</th>
    </tr>
    <tr>
      <td>不影响table尺寸</td>
      <td>需border-box盒模型</td>
    </tr>
    <tr>
      <td>支持渐变边框</td>
      <td>×</td>
    </tr>
  </table>

• CSS：

  .table-1 {
    background: linear-gradient(deepskyblue, deeppink);
  }
  .table-1 :where(td, th) {
    background-color: #fff;
  }
  
  .table-2 {
    border-collapse: collapse;
  }
  .table-2 :where(td, th)  {
    border: 1px solid deepskyblue;
  }