关于css:如何给table添加边框

1. 开发环境 vue+vant
2. 电脑系统 windows10 专业版
3. 在开发的过程中, 咱们常常会应用到表格组件, 然而咱们会发现在 vant 中没有表格组件, 这个时候咱们能够抉择本人手写一个 table 或者是应用插件, 在这里我抉择的是手写 table, 上面我来分享一下如何给 table 增加边框, 心愿对你有所帮忙。
4. 在 template 中增加如下代码:

<table class="ruletable">
      <th>Order Time</th>
      <th>Data</th>
      <th>User</th>
      <tr>
       <td>18-12-2020 10:20:34.311</td>
       <td>102034311</td>
       <td>Any Mille</td>
      </tr>
      <tr>
       <td>18-12-2020 10:20:34.311</td>
       <td>102034311</td>
       <td>Any Mille</td>
      </tr>
      <tr>
       <td>18-12-2020 10:20:34.311</td>
       <td>102034311</td>
       <td>Any Mille</td>
      </tr>
     </table>

5. 在 css 中增加如下代码:

.ruletable{
  width: 100%;
  border-collapse: collapse; // 次要代码
 }
 .ruletable th{text-align: center;}

 .ruletable tr:nth-of-type(1){border-top: 1px solid #FFDCDF; // 增加边框}

 .ruletable tr{border-bottom: 1px solid #FFDCDF; // 增加边框}

6. 效果图如下:

7. 本期的分享到了这里就完结啦, 是不是很 nice, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。