请求修改GPA计算器代码以适配智能手机屏幕

核心修改思路 #

针对输入表格的输入字段过宽、未适配小屏幕的问题，通过CSS实现响应式布局，让表格和输入框自动适配移动端屏幕宽度，无需横向滚动。

具体修改步骤 #

• 给输入表格添加响应式容器：
  把输入表格包裹在带横向滚动兜底的容器中，同时设置表格宽度为100%，确保小屏幕下的基础适配：

  <!-- 原输入表格外层添加容器 -->
  <div class="responsive-input-table">
    <table id="gpa-input-table">
      <!-- 原表格内容 -->
    </table>
  </div>
  

• 强制输入框自适应单元格宽度：
  给所有输入框设置宽度100%，并通过盒模型确保内边距不额外撑宽元素，同时限制最大宽度避免大屏幕下过宽：

  #gpa-input-table input {
    width: 100%;
    max-width: 120px;
    box-sizing: border-box;
    padding: 4px 8px;
  }
  

• 表格基础样式优化：
  设置表格宽度铺满容器，合并边框减少冗余空间，同时针对移动端调整字体和内边距：

  #gpa-input-table {
    width: 100%;
    border-collapse: collapse;
  }
  #gpa-input-table th, #gpa-input-table td {
    padding: 6px 4px;
    text-align: center;
  }
  /* 移动端专属优化 */
  @media (max-width: 768px) {
    #gpa-input-table th, #gpa-input-table td {
      font-size: 14px;
      padding: 4px 2px;
    }
    #gpa-input-table input {
      max-width: 100px;
      font-size: 14px;
    }
  }
  

• 可选：超小屏幕下的列折叠（按需使用）：
  如果表格列数过多，可在480px以下的屏幕将单元格转为垂直排列，压缩横向空间：

  @media (max-width: 480px) {
    #gpa-input-table td {
      display: flex;
      flex-direction: column;
      text-align: left;
    }
    #gpa-input-table th {
      display: none;
    }
  }
  

验证修改效果 #

修改后在移动端测试：输入表格会自动适配屏幕宽度，输入框不会超出可视范围，无需横向滚动即可操作所有字段。

内容的提问来源于stack exchange，提问作者Tharwat Okab