给HTML表格列设置box-shadow样式不显示的问题如何解决？

HTML 中 <col> 元素支持的 CSS 属性非常有限，仅支持 border、background、width、visibility 四类属性，box-shadow 不在支持范围内，所以给 <col> 设置阴影样式不会生效。

推荐使用 CSS 结构伪类直接选中目标列的所有单元格添加样式，无需修改原有 HTML 结构：

/* 选中表格第4列的所有th和td */
table tr > :nth-child(4) {
  box-shadow: -1px 0 0 0 red;
  /* 可选：如果阴影被相邻单元格遮挡，添加以下两行保证阴影层级正常 */
  position: relative;
  z-index: 1;
}

如果后续表格列的顺序可能调整，担心 nth-child 匹配错位，可以手动给目标列的所有 th、td 添加统一类名，再针对类名设置样式：

<!-- 示例：给第四列所有单元格加类 -->
<tr>
  <th>Column 1</th>
  <th>Column 2</th>
  <th>Column 3</th>
  <th class="box-shadow-column">Column 4</th>
  <th>Column 5</th>
</tr>
<tr>
  <td>Some text</td>
  <td>Some text</td>
  <td>Some text</td>
  <td class="box-shadow-column">Some text</td>
  <td>Some text</td>
</tr>

.box-shadow-column {
  box-shadow: -1px 0 0 0 red;
  position: relative;
  z-index: 1;
}

以上两种写法在 Gatsby 环境下都可以正常生效，和普通前端项目用法没有差异。

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