参数对比必须用语义化，配与scope属性；长文本需max-width、text-overflow、word-break三者协同；小屏应切垂直卡片布局。

参数表格必须用 <table>，别碰 Grid/Flex <p>参数对比本质是二维语义关系：同一行代表一个参数（如“内存”“分辨率”），同一列代表一个对象（如“iPhone 15”“Pixel 8”）。<code><table> 是唯一被屏幕阅读器、PDF 导出工具、打印样式和 Excel 导入逻辑原生识别的结构。用 <code>div + display: grid 做参数表，导出 PDF 时行列错位、Excel 打开后列名全丢、盲人用户无法定位“iPhone 的电池容量在哪一列”——这不是兼容性问题，是语义缺失。

<thead> 和 <code>scope 属性不能省

不写 <thead> 或漏掉 <code>scope，等于把参数表变成纯视觉排版。辅助技术读不出哪是列标题、哪是行标题，导出也大概率失败。

• <th scope="col"> 必须放在第一行，标出“iPhone 15”“Galaxy S24”这些是列名 <li><code><th scope="row"> 必须放在第一列，标出“处理器”“屏幕尺寸”这些是参数名 <li>全用 <code><td> 或混用没 <code>scope 的 <th>，会导致导出 Excel 时第一行被当普通数据，列名丢失 <li><code><tbody> 必须包裹所有数据行，不能只写 <code><tr><td> 堆砌 <h3>长文本溢出要三行 CSS 同时生效</h3> <p>参数值常含长字符串（如“高通骁龙 8 Gen 3（4nm 工艺，主频 3.3GHz）”），只设 <code>white-space: nowrap 会撑破列宽；只设固定 width 又在小屏上强制横向滚动。真正起效的是这三行组合：

  .param-table td,
  .param-table th {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-word;
  }

  • max-width 控制单格宽度上限，防止单列独大破坏对比节奏
  • text-overflow: ellipsis 要配合 white-space: normal 才生效，很多人漏掉后者
  • word-break: break-word 确保中英文混合长串也能合理换行，不卡死布局

  小屏必须切垂直卡片，别指望响应式表格

  手机屏宽通常不足 400px，维持两列表格只会触发横向滚动——这不是响应式，是反体验。正确做法是在 max-width: 480px 断点切换为垂直卡片布局：

  

  Html2md

  使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

  下载

  @media (max-width: 480px) {
    .param-table thead,
    .param-table tbody tr {
      display: block;
    }
    .param-table th[scope="col"],
    .param-table td {
      display: block;
      width: 100%;
    }
    .param-table th[scope="row"] {
      font-weight: bold;
      margin-top: 8px;
    }
  }

  关键点：隐藏 <thead>，把每行参数转成一个带标题的块；否则用户得左右拖着看“处理器：”，再拖回来找“iPhone 15”的值——这种交互没人受得了。</thead>

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！