如何仅用CSS媒体查询将硬编码表格布局老旧网页快速改为响应式？

完全不需要逐行遍历修改原有代码，靠高优先级CSS规则覆盖原有硬编码属性即可实现适配，全程不需要JavaScript：

• 第一步：全局覆盖硬编码宽度规则
  用通配选择器搭配!important提权，直接覆盖所有元素、表格、媒体资源上写死的宽度值，不需要逐行删除原有行内属性或者旧样式：

  /* 重置所有元素盒模型与固定宽度 */
  *, *::before, *::after,
  table, thead, tbody, tfoot, tr, th, td, col, colgroup {
    box-sizing: border-box !important;
    max-width: 100% !important;
    width: auto !important;
    float: none !important;
  }
  /* 保证媒体资源不溢出屏幕 */
  img, video, embed, object, iframe {
    max-width: 100% !important;
    height: auto !important;
  }
  

• 第二步：适配表格排版逻辑
  老页面全靠表格做布局，直接修改表格的默认布局行为，分两类场景处理：

  对于用来展示数据的内容表格，加横向滚动兜底，避免挤乱内容；对于用来做整页排版的布局表格，小屏幕下直接让单元格转块级堆叠，完全保留原有内容的上下顺序

  /* 表格基础规则重置 */
  table {
    table-layout: fixed !important;
    border-collapse: collapse !important;
    overflow-x: auto !important;
  }
  /* 小屏幕断点下布局表格堆叠 */
  @media screen and (max-width: 768px) {
    body {
      margin: 0 !important;
      padding: 12px !important;
      overflow-x: hidden !important;
    }
    /* 匹配整页布局表格自动堆叠 */
    body > table,
    table[role="presentation"],
    table.layout {
      display: block !important;
      width: 100% !important;
    }
    body > table tr,
    body > table td,
    table[role="presentation"] tr,
    table[role="presentation"] td {
      display: block !important;
      width: 100% !important;
      padding: 6px 0 !important;
      text-align: left !important;
    }
  }
  

• 第三步：细节兜底优化
  • 根字号适配：老页面大多用px写死字号，直接在移动端断点调整根字号，就能让所有文字等比适配小屏幕，不需要逐行改字号：

    @media screen and (max-width: 480px) {
      html {
        font-size: 14px !important;
      }
    }
    

  • 溢出兜底：如果有个别遗漏的硬编码大尺寸元素导致横向滚动，直接给body加overflow-x: hidden !important就能隐藏横向滚动条，不影响纵向浏览。
  • 表单元素适配：给所有input、select、textarea加max-width: 100% !important规则，避免表单控件溢出屏幕。

注：所有规则都加了!important提权，不管原有样式是行内写入、还是旧选择器优先级多高，都会被新规则覆盖，只需要把这段CSS放到页面样式表的任意位置即可生效，不需要修改原有业务代码。

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