<div class="table-scroll" tabindex="0" role="region" aria-label="课程安排，可横向滚动">
<table style="min-width: 640px">
  <caption>前三次理论课</caption>
  <thead>
    <tr><th scope="col">课次</th><th scope="col">主题</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">第1次</th><td>网页设计基础</td></tr>
    <tr><th scope="row">第2次</th><td>初识HTML5</td></tr>
    <tr><th scope="row">第3次</th><td>HTML5中的表格</td></tr>
  </tbody>
</table>
</div>
<style>
  .table-scroll { max-width: 360px; overflow-x: auto; }
  .table-scroll:focus { outline: 3px solid #1765b5; }
</style>
<!-- 下方样式只用于显示网格，CSS将在后续课程学习。 -->
<style>
  table { border-collapse: collapse; font: 20px/1.5 sans-serif; }
  th, td { border: 1px solid #899bb3; padding: 8px 12px; }
  th { background: #edf4ff; }
</style>

课堂对照：把 overflow-x: auto 改成 overflow-x: hidden 后，右侧内容如何访问？这个方案是预先体验，不要求现在记忆CSS语法。