如何实现HTML表格动态单元格间距 完成键值对语义化排版

解决方案 #

用<table>实现该键值对排版完全可行，语义上也确实比<span>等通用标签更合适，不需要改动现有HTML结构，仅通过CSS调整即可实现动态适配的单元格间距，完美匹配设计稿效果。

核心实现逻辑：

• 重置浏览器默认的表格样式，消除原生表格自带的不可控间隙
• 通过内边距精准控制键、值之间的水平间距，以及每行内容的垂直间距
• 表格默认的自动布局特性会自动让键列宽度适配最长的键名内容，不需要手动写死列宽，天然实现动态适配效果

完整实现代码

CSS样式：

table {
  /* 合并表格边框，清除默认单元格间隙 */
  border-collapse: collapse;
  text-align: left;
  /* 可根据设计稿调整全局字体样式 */
  font-size: 16px;
}

table th {
  /* 控制键名与对应值之间的水平间距，数值可按设计稿调整 */
  padding-right: 24px;
  /* 统一设置垂直内边距，控制行间距 */
  padding-top: 8px;
  padding-bottom: 8px;
  /* 清除th默认加粗样式，如设计稿需要粗体可删除该行 */
  font-weight: normal;
  /* 若需要键名右侧对齐更工整，可取消下方注释 */
  /* text-align: right; */
}

table td {
  /* 与th保持一致的垂直内边距，保证行高统一 */
  padding-top: 8px;
  padding-bottom: 8px;
}

HTML结构（无需修改原有代码）：

<table>
  <tr>
    <th>Population:</th>
    <td>334,300</td>
  </tr>
  <tr>
    <th>Region:</th>
    <td>Europe</td>
  </tr>
  <tr>
    <th>Capital:</th>
    <td>Reykjavík</td>
  </tr>
</table>

属性说明

• border-collapse: collapse 是实现自定义间距的核心，它会合并表格相邻单元格的边框，清除浏览器默认给table加的固定border-spacing间隙，之后所有间距都可以通过padding自由控制
• 所有间距数值都可以根据设计稿的实际尺寸调整，修改padding值即可精准还原排版
• 该方案完全保留表格语义，辅助设备可以正确识别键值对应关系，同时适配不同长度的键名内容，不会出现内容溢出或者列宽错位的问题

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