exam.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title></title>
  <link href="css/mui.min.css" rel="stylesheet" />
  <link href="css/common.css" rel="stylesheet" />
  <style>
    .mui-content {
      font-size: 14px;
    }

    #course-head {
      display: -webkit-flex;
      display: flex;
      height: 35px;
      line-height: 35px;
      padding: 0 10px;
      box-shadow: 1px 1px 1px #dce1de;
      text-align: center;
      color: #03aa6c;
    }

    .mui-scroll-wrapper {
      top: 35px;
    }

    #course-lists {
      padding: 10px;
      font-size: 13px;
      color: #8f8f94;
      text-align: center;
    }

    #course-lists>li {
      border-bottom: solid 1px #dce1de;
    }

    .course-list {
      display: -webkit-flex;
      display: flex;
      padding: 15px 0;
    }

    .course-list li,
    #course-head li {
      -webkit-flex: 1;
      flex: 1;
    }

    .course-list li:nth-child(3),
    #course-head li:nth-child(3) {
      -webkit-flex: 2;
      flex: 2;
    }

    .course-list li:nth-child(6),
    #course-head li:nth-child(6) {
      -webkit-flex: 2;
      flex: 2;
    }

    .course-list li:first-child,
    #course-head li:first-child {
      -webkit-flex: 2;
      flex: 2;
    }
  </style>
</head>

<body>
  <div class="mui-content">
    <ul id="course-head">
      <li>课程名称</li>
      <li>姓名</li>
      <li>时间</li>
      <li>地点</li>
      <li>座位号</li>
    </ul>
    <div class="mui-scroll-wrapper">
      <div class="mui-scroll" id="exam">
        <script id="exam-tpl" type="text/html">
          <ul id="course-lists">
            {{each data as scoreList}}
            <li>
              <ul class="course-list">
                {{each scoreList as item}}
                <li>{{item}}</li>
                {{/each}}
              </ul>
            </li>
            {{/each}}
          </ul>
        </script>
      </div>
    </div>
  </div>
  <script src="vendor/mui.min.js"></script>
  <script src="vendor/zepto.min.js"></script>
  <script src="vendor/template.js"></script>
  <script src="js/common.js"></script>
  <script src="js/exam.js"></script>
</body>

</html>