HTML表格colgroup设置border-radius无效，求无障碍兼容解决方法

问题原因 #

<col>是表格的抽象列定义元素，浏览器仅支持为它设置有限的CSS属性（如width、background等），border-radius这类盒模型相关属性无法直接作用在<col>上，所以直接给col.selected添加border-radius不会生效。

解决方案 #

我们可以保留<colgroup>用于保障无障碍语义，转而通过选中对应列的<td>元素来实现边框和圆角效果，具体步骤如下：

1. 调整表格边框合并模式
   将border-collapse: collapse改为separate，并设置border-spacing: 0，这样才能单独控制单元格的边框和圆角：

   table{
     border-collapse: separate;
     border-spacing: 0;
     border: none;
   }
   

2. 统一单元格基础样式
   给所有<td>设置透明边框，避免添加真实边框时出现布局偏移：

   td {
     padding: 5px;
     border: 1px solid transparent;
   }
   

3. 为选中列的单元格设置边框和圆角
   通过nth-child选择器定位到<col>对应的列，分别给该列的首行、末行和中间行单元格设置边框与圆角：

   /* 选中列的所有单元格设置左右边框和阴影 */
   td:nth-child(1) {
     border-left: 1.5px solid #2698d6;
     border-right: 1.5px solid #2698d6;
     box-shadow: 0px 4px 31px rgba(96, 96, 96, 0.1);
   }
   
   /* 首行单元格添加上边框和顶部圆角 */
   tr:first-child td:nth-child(1) {
     border-top: 1.5px solid #2698d6;
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
   }
   
   /* 末行单元格添加下边框和底部圆角 */
   tr:last-child td:nth-child(1) {
     border-bottom: 1.5px solid #2698d6;
     border-bottom-left-radius: 8px;
     border-bottom-right-radius: 8px;
   }
   

4. 关联colgroup的选中状态（可选，用于动态切换）
   如果需要动态切换选中列，可以结合CSS的:has()选择器，通过<col>的类来控制对应列的样式（现代浏览器均支持）：

   /* 当第一列的col有selected类时，应用样式 */
   table:has(col.selected:nth-child(1)) td:nth-child(1) {
     border-left: 1.5px solid #2698d6;
     border-right: 1.5px solid #2698d6;
     box-shadow: 0px 4px 31px rgba(96, 96, 96, 0.1);
   }
   
   table:has(col.selected:nth-child(1)) tr:first-child td:nth-child(1) {
     border-top: 1.5px solid #2698d6;
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
   }
   
   table:has(col.selected:nth-child(1)) tr:last-child td:nth-child(1) {
     border-bottom: 1.5px solid #2698d6;
     border-bottom-left-radius: 8px;
     border-bottom-right-radius: 8px;
   }
   

完整代码示例 #

table{
  border-collapse: separate;
  border-spacing: 0;
  border: none;
}

td {
  padding: 5px;
  border: 1px solid transparent;
}

table:has(col.selected:nth-child(1)) td:nth-child(1) {
  border-left: 1.5px solid #2698d6;
  border-right: 1.5px solid #2698d6;
  box-shadow: 0px 4px 31px rgba(96, 96, 96, 0.1);
}

table:has(col.selected:nth-child(1)) tr:first-child td:nth-child(1) {
  border-top: 1.5px solid #2698d6;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

table:has(col.selected:nth-child(1)) tr:last-child td:nth-child(1) {
  border-bottom: 1.5px solid #2698d6;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

<table>
  <colgroup>
      <col span="1" class="selected" />
      <col span="1" />
      <col span="1" />
      <col span="1" />
  </colgroup>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
  </tr>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
  </tr>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
  </tr>
   <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
    <td>Column 4</td>
  </tr>
</table>

这种方案既保留了<colgroup>的无障碍语义，又实现了列的圆角边框效果。

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