自定义table

自定义table

<table class="table">
        <tr>
          <th>用户场景</th>
          <th>收集目的</th>
          <th>收集方式</th>
          <th>个人信息字段</th>
        </tr>
        <tr>
          <!-- 设置了rowspan的单元格会占据对应个数的单元格行数-->
          <td rowspan="2">帐号相关</td>
          <td>登录</td>
          <td>用户授权第三方登录</td>
          <td>头像、昵称</td>
        </tr>
        <tr>
          <!--因为上一行中的单元格设置了rowspan=2 下一行相对于要少一个单元格-->
          <td>
            手机号认证,完善网络标识身份
          </td>
          <td>用户输入</td>
          <td>电话号码</td>
        </tr>
        <tr>
          <td>访问</td>
          <td>记录成日志留存用于防止恶意浏览及点击</td>
          <td>cookies</td>
          <td>用户的访问页面模块、访问IP、访问网站地址、访问时间、访问时长、访问的浏览器</td>
        </tr>
      </table>

.table {
      border-collapse: collapse; //解决table border被重叠的问题
      border-spacing: 0; // 解决table设置border后单元格之间的自带间距样式
      margin: 30px auto 60px;
      color: #042749;

      tr:first-child {
        background-color: #F7F9FD;
        color: #385775;
      }

      tr {
        // 设置每一列的宽度
        th:nth-child(1) {
          width: 158px;
        }
        // 设置每一列的宽度
        th:nth-child(2) {
          width: 354px;
        }
        // 设置每一列的宽度
        th:nth-child(3) {
          width: 224px;
        }
        // 设置每一列的宽度
        th:nth-child(4) {
          width: 364px;
        }
      }

      td, th {
        box-sizing: border-box;
        border: 1px solid #DFE7EE;
        height: 56px;
        padding: 0 48px;
      }
    }

效果截图