在 Shopify Liquid 模板中，当表格单元格（<td>）内容高度不一致时，默认会居中对齐，导致视觉错位；只需为每个 <td> 添加 vertical-align: top 内联样式，即可统一顶部对齐。
在 shopify liquid 模板中，当表格单元格（`
默认情况下，HTML 表格单元格的 vertical-align 计算值为 middle，这意味着即使两列文本行数不同（如 macOS 描述更长），浏览器也会将各自内容在其单元格内垂直居中，从而造成“错层”效果。解决方法非常直接：显式声明 vertical-align: top —— 它仅作用于表格单元格、表元（<th>）及具有 display: table-cell 的元素，且无需修改 Liquid 逻辑或额外 JavaScript。
以下是修复后的完整代码示例（已补全缺失的 <tr> 和 <tbody> 结构，并优化可读性）：
<table width="100%" style="table-layout: auto;">
<tbody>
<tr>
<td style="width: 50%; vertical-align: top; padding: 0;">
{{ 'https://cdn.shopify.com/s/files/1/0556/5258/1539/files/windows-logo.png' | img_tag: 'Windows Compatible Operating Systems' }}
Windows Compatible Operating Systems<br><br>
{{ product.metafields.custom.windows_compatible_operating_systems_3_0 }}
</td>
<td style="width: 50%; vertical-align: top; padding: 0;">
{{ 'https://cdn.shopify.com/s/files/1/0556/5258/1539/files/mac-logo.png?v=1707807667' | img_tag: 'Mac Compatible Operating Systems' }}
Mac Compatible Operating Systems<br><br>
{{ product.metafields.custom.mac_compatible_operating_systems_3_0 }}
</td>
</tr>
</tbody>
</table>✅ 关键要点说明：
- vertical-align: top 必须写在 <td> 标签的 style 属性中，不可仅作用于父 <tr> 或 <table>；
- 确保 HTML 结构完整：原始代码遗漏了 <tr> 开始标签，会导致渲染异常，务必补全；
- 推荐添加 padding: 0 避免默认单元格内边距干扰对齐效果（可根据设计需求后续调整）；
- 不推荐使用 height: 100%（如答案中所示），它在无明确容器高度时无效，反而可能引发意外拉伸；
- 若需响应式适配，建议后续结合 CSS 媒体查询或改用 Flexbox 布局替代表格（但 Liquid 中简单展示场景下，vertical-align 仍是最轻量、兼容性最佳的方案）。
该方案完全基于标准 CSS，与 Liquid 语法无关，适用于所有支持现代 CSS 的浏览器，且无需依赖任何第三方库或 Shopify 特定 API。
