在列组 css 上添加边框半径答案

【问题标题】：add border-radius on column group css在列组 css 上添加边框半径
【发布时间】：2022-11-28 14:34:53
【问题描述】：

在 HTML 表中，我试图在列组上应用 border-radius 但它不起作用。有没有什么办法解决这一问题？

我必须在表视图上实现可访问性，因此我无法选择其他替代解决方案。

如何在列组上应用边框半径？

table{
  border-collapse: collapse;
  border-spacing: 30px;
}

td {
  padding: 5px;
}

colgroup > col.selected{
  border: 1.5px solid #2698d6;
  box-shadow: 0px 4px 31px rgba(96, 96, 96, 0.1);
  border-radius: 8px;
}

<table>
  <colgroup>
      <col span="1" class="selected" />
  </colgroup>
  <tr>
    <td>Sample Text</td>
  </tr>
  <tr>
    <td>Sample Text</td>
  </tr>
  <tr>
    <td>Sample Text</td>
  </tr>
  <tr>
    <td>Sample Text</td>
  </tr>
  <tr>
    <td>Sample Text</td>
  </tr>
</table>

【问题讨论】：

列的边界半径？
@MAYURSANCHETI 是的。我需要以这样的方式实现它，即当用户选择该列时，应向其添加带有 border-radius 的边框

标签： html css reactjs sass html-table

【解决方案1】：

你不能将 border-radius 应用于 tr 或 table 但你可以像下面那样申请 td ，

table {
  border-collapse: separate;
  border-spacing: 0 16px;
}

tr td {
  border: 1px solid transparent;
  transition: all ease 0.3s;
  padding: 5px;
}

tr td:first-child {
  border-right: 0px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

tr td:last-child {
  border-left: 0px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

tr td:not(:first-child, :last-child) {
  border-left: 0px;
  border-right: 0px;
}

tr:hover td:first-child {
  border-color: black;
  border-right: 0px;
}

tr:hover td:last-child {
  border-color: black;
  border-left: 0px;
}

tr:hover td:not(:first-child, :last-child) {
  border-color: black;
  border-left: 0px;
  border-right: 0px;
}

<body>
<table>
<tbody>
  <tr>
    <td>01</td>
    <td>02</td>
    <td>03</td>
    <td>04</td>
    <td>05</td>
    <td>06</td>
  </tr>
  <tr>
    <td>07</td>
    <td>08</td>
    <td>09</td>
    <td>10</td>
    <td>11</td>
    <td>12</td>
  </tr>
</tbody>
</table>
</body>

</html>

如有任何疑问，请发表评论

【讨论】：