如何实现响应式Price Compare卡片布局？兼顾screen reader适配

针对你的响应式价格对比卡片需求，推荐两种兼顾无障碍、布局完整性的实现方案，均能解决边框连续、移动端标题调整及滚动问题：

方案一：语义化CSS Grid布局（灵活度高） #

该方案采用单一Grid容器管理所有元素，通过媒体查询调整视觉表现，DOM结构保持语义化，不影响屏幕阅读器读取。

HTML结构 #

<section class="price-comparison">
  <h2 class="comparison-title">Compare Plans</h2>
  <div class="comparison-grid">
    <!-- 计划标题行 -->
    <div class="grid-cell plan-header"></div> <!-- 移动端留空的位置 -->
    <div class="grid-cell plan-header">Basic</div>
    <div class="grid-cell plan-header">Pro</div>
    <div class="grid-cell plan-header">Enterprise</div>
    
    <!-- 价格行 -->
    <div class="grid-cell feature-label">Price</div>
    <div class="grid-cell feature-value">$9/month</div>
    <div class="grid-cell feature-value">$29/month</div>
    <div class="grid-cell feature-value">$99/month</div>
    
    <!-- 特性行 -->
    <div class="grid-cell feature-label">Storage</div>
    <div class="grid-cell feature-value">10GB</div>
    <div class="grid-cell feature-value">100GB</div>
    <div class="grid-cell feature-value">Unlimited</div>
    
    <!-- 更多特性行... -->
  </div>
</section>

CSS实现 #

/* 基础样式 */
.price-comparison {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
  position: relative; /* 为移动端标题定位做准备 */
}

.comparison-title {
  text-align: center;
  margin-bottom: 1.5rem;
}

.comparison-grid {
  display: grid;
  grid-template-columns: 180px repeat(3, 1fr);
  gap: 1rem;
  border-top: 1px solid #e0e0e0;
}

.grid-cell {
  padding: 1rem;
  border-bottom: 1px solid #e0e0e0;
  text-align: center;
}

.feature-label {
  text-align: left;
  font-weight: 500;
}

.plan-header {
  font-weight: 700;
  font-size: 1.1rem;
}

/* 移动端适配（768px以下） */
@media (max-width: 768px) {
  .price-comparison {
    padding-top: 3rem; /* 给上移的标题预留空间 */
  }

  .comparison-title {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
  }

  .comparison-grid {
    grid-template-columns: 180px repeat(3, minmax(200px, 1fr));
    gap: 0.5rem; /* 缩小列间距 */
    overflow-x: auto; /* 开启横向滚动 */
    padding-bottom: 1rem; /* 滚动条预留空间 */
  }

  /* 让第一行的空单元格保持高度，实现原位置留空 */
  .grid-cell.plan-header:first-child {
    visibility: hidden;
  }
}

关键解决点 #

• 边框连续：所有单元格共享Grid布局的行线，统一设置border-bottom，避免嵌套布局导致的边框断裂。
• 无障碍兼容：标题的DOM位置未改变，仅通过CSS绝对定位视觉上移，屏幕阅读器仍能按正常语义顺序读取。
• 移动端滚动：Grid容器开启overflow-x: auto，结合minmax保证列宽不被压缩，实现横向滚动。

方案二：HTML Table布局（语义化更强） #

价格对比本质是表格数据，使用原生Table能获得更好的无障碍支持，同时轻松解决边框和响应式问题。

HTML结构 #

<section class="price-comparison">
  <h2 class="comparison-title">Compare Plans</h2>
  <div class="table-container">
    <table class="comparison-table">
      <thead>
        <tr>
          <th></th> <!-- 移动端留空的表头单元格 -->
          <th>Basic</th>
          <th>Pro</th>
          <th>Enterprise</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="feature-label">Price</td>
          <td>$9/month</td>
          <td>$29/month</td>
          <td>$99/month</td>
        </tr>
        <tr>
          <td class="feature-label">Storage</td>
          <td>10GB</td>
          <td>100GB</td>
          <td>Unlimited</td>
        </tr>
        <!-- 更多特性行... -->
      </tbody>
    </table>
  </div>
</section>

CSS实现 #

/* 基础样式 */
.price-comparison {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
  position: relative;
}

.comparison-title {
  text-align: center;
  margin-bottom: 1.5rem;
}

.table-container {
  overflow-x: auto; /* 移动端滚动容器 */
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
}

.comparison-table th,
.comparison-table td {
  padding: 1rem;
  border-bottom: 1px solid #e0e0e0;
  text-align: center;
}

.comparison-table th {
  font-weight: 700;
  font-size: 1.1rem;
}

.feature-label {
  text-align: left;
  font-weight: 500;
  width: 180px;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .price-comparison {
    padding-top: 3rem;
  }

  .comparison-title {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
  }

  .comparison-table th:first-child,
  .comparison-table td:first-child {
    min-width: 180px;
  }

  .comparison-table th:not(:first-child),
  .comparison-table td:not(:first-child) {
    min-width: 200px;
  }

  /* 隐藏第一列表头的内容，实现原位置留空 */
  .comparison-table th:first-child {
    visibility: hidden;
  }
}

关键解决点 #

• 边框连续：使用border-collapse: collapse让表格边框完全合并，彻底解决边框断裂问题。
• 无障碍支持：原生Table的<thead>、<tbody>、<th>等标签是屏幕阅读器的标准语义化标记，读取体验更好。
• 移动端调整：通过visibility: hidden隐藏第一列表头内容实现留空，容器开启横向滚动，标题仅视觉上移，DOM结构保持完整。

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