SOURCE

<h1>
  5.循环：课程信息输出
</h1>
<div class="courses">
  <div class="toolbar">
    <input id="teacher-name-input" placeholder="请输入教师名" class="el-input__inner"
    type="text">
    <button id="query-btn" class="el-button">
      查找
    </button>
    <button id="clear-btn" class="el-button">
      清空结果
    </button>
  </div>
  <table>
    <thead>
      <tr>
        <td>
          课程号
        </td>
        <td>
          课序号
        </td>
        <td>
          课程名
        </td>
        <td>
          教师名
        </td>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

html {
  color: #606266;
}

body {
  padding: 20px;
}

body h1 {
  text-align: center;
}

.toolbar {
  margin: 20px 0 10px;
  display: flex;
}

.toolbar input {
  width: auto;
  flex: 1;
  margin-right: 10px;
}

.courses table {
  width: 100%;
  text-align: center;
}

thead {
  font-weight: bold;
  color: #909399;
}

td {
  border: 1px solid #DCDFE6;
}