在响应式HTML表格中添加跨多列嵌套行及HTML Meter组件

核心实现思路 #

利用表格的<tr>嵌套跨列<td>扩展数据行，在嵌套行内通过Flex布局实现数值在上、meter组件在下的结构，同时适配响应式表格的布局规则。

完整代码示例 #

HTML结构

<table class="rwd-table">
  <thead>
    <tr>
      <th>指标名称</th>
      <th>分类</th>
      <th>单位</th>
    </tr>
  </thead>
  <tbody>
    <!-- 数据行 -->
    <tr class="data-row">
      <td>用户活跃度</td>
      <td>移动端</td>
      <td>%</td>
    </tr>
    <!-- 嵌套的统计行（跨所有列） -->
    <tr class="meter-row">
      <td colspan="3">
        <div class="meter-container">
          <div class="stats-values">
            <span>均值: <strong>68.5</strong></span>
            <span>±3σ范围: <strong>42.1-94.9</strong></span>
          </div>
          <meter min="20" max="100" value="68.5" low="42.1" high="94.9"></meter>
        </div>
      </td>
    </tr>

    <!-- 另一组数据示例 -->
    <tr class="data-row">
      <td>订单转化率</td>
      <td>PC端</td>
      <td>%</td>
    </tr>
    <tr class="meter-row">
      <td colspan="3">
        <div class="meter-container">
          <div class="stats-values">
            <span>均值: <strong>3.2</strong></span>
            <span>±3σ范围: <strong>1.5-4.9</strong></span>
          </div>
          <meter min="0" max="10" value="3.2" low="1.5" high="4.9"></meter>
        </div>
      </td>
    </tr>
  </tbody>
</table>

CSS样式（含响应式适配）

/* 基础响应式表格样式 */
.rwd-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
}
.rwd-table th, .rwd-table td {
  padding: 0.8em;
  text-align: left;
  border-bottom: 1px solid #e0e0e0;
}
.rwd-table th {
  background-color: #f5f5f5;
  font-weight: 600;
}

/* 嵌套统计行样式 */
.meter-row {
  background-color: #fafafa;
}
.meter-row td {
  padding: 0.6em 0.8em;
  border-bottom: none;
}
.meter-container {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}
.stats-values {
  display: flex;
  gap: 1.5em;
  font-size: 0.95em;
  color: #555;
}
.stats-values strong {
  color: #222;
}
/* Meter组件样式调整 */
meter {
  width: 100%;
  height: 1.3em;
}
meter::-webkit-meter-bar {
  background: #eee;
  border-radius: 3px;
}
meter::-webkit-meter-optimum-value {
  background: #4caf50;
  border-radius: 3px;
}
meter::-webkit-meter-suboptimum-value {
  background: #ff9800;
  border-radius: 3px;
}
meter::-webkit-meter-even-less-good-value {
  background: #f44336;
  border-radius: 3px;
}

/* 小屏幕响应式适配 */
@media (max-width: 768px) {
  .stats-values {
    flex-direction: column;
    gap: 0.4em;
  }
  .rwd-table td {
    padding: 0.6em;
  }
}

可选：点击展开/收起嵌套行

如果需要默认隐藏统计行，点击数据行再显示，添加以下JS和CSS：

.meter-row.hidden {
  display: none;
}

document.querySelectorAll('.data-row').forEach(row => {
  row.style.cursor = 'pointer';
  row.addEventListener('click', () => {
    const nextRow = row.nextElementSibling;
    if (nextRow?.classList.contains('meter-row')) {
      nextRow.classList.toggle('hidden');
    }
  });
});

关键注意事项 #

• colspan的值必须与表格的总列数一致，确保嵌套行的<td>能跨满整个表格宽度。
• 嵌套行的背景色与数据行区分开，提升视觉层次感。
• Meter组件的min/max/low/high属性要根据实际统计数据设置，确保展示准确。

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