如何不使用overflow:hidden为表格列添加匹配圆角的边框

解决方案 #

可以直接使用CSS渐变背景实现需求，全程不需要用到overflow: hidden，完全不会影响单元格内下拉菜单的正常展示，同时能完美匹配设计图的圆角效果。

你只需要修改tr:hover时首个td的样式即可，修改后的核心CSS如下：

/* 保留你原有所有CSS不变，只替换hover部分的代码 */
.table tbody tr:hover td:first-child {
  /* 渐变实现左侧2px蓝色条，剩余区域为白色背景，自动适配td圆角 */
  background: linear-gradient(to right, #2c66ee 2px, #fff 2px) no-repeat left top / 100% 100%;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

方案原理

1. 线性渐变从左到右生成2px宽的蓝色条，剩余部分填充白色背景，完全覆盖td区域
2. 浏览器会自动将背景按照td设置的border-radius裁剪，不需要额外加overflow:hidden就不会出现背景溢出圆角的问题
3. 背景属于td的底层样式，完全不会影响单元格内元素的层级，下拉菜单可以正常弹出展示

完整可运行代码

.wrapper {
  background-color: #f1f4f8;
  height: 100vh;
}

.table {
  border-collapse: separate;
  border-spacing: 1px 2px;
  border: none;
}

.table td,
.table th {
  white-space: nowrap;
  border: none !important;
}

.table thead th {
  border: none;
  padding: 7.5px 10px;
  background-color: #f1f4f8;
  z-index: 1;
}

.table td {
  padding: 10px;
  height: 50px;
  background-color: #fff;
}

.table td:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.table td:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

/* 替换后的hover样式 */
.table tbody tr:hover td:first-child {
  background: linear-gradient(to right, #2c66ee 2px, #fff 2px) no-repeat left top / 100% 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.10.2/umd/popper.min.js" integrity="sha512-nnzkI2u2Dy6HMnzMIkh7CPd1KX445z38XIu4jG1jGw7x5tSL3VBjE44dY4ihMU1ijAQV930SPM12cCFrB18sVw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="wrapper">
  <div class="container">
    <table class="table">
      <thead>
        <th>
          商品
        </th>
        <th>
          价格
        </th>
        <th>
          数量
        </th>
      </thead>
      <tbody>
        <tr>
          <td>
            <div class="btn-group" role="group" aria-label="带嵌套下拉菜单的按钮组">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      下拉菜单
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">下拉链接1</a>
      <a class="dropdown-item" href="#">下拉链接2</a>
    </div>
  </div>
</div>
          </td>
          <td>
            $200
          </td>
          <td>
            3
          </td>
        </tr>
        <tr>
          <td>
            巧克力
          </td>
          <td>
            $200
          </td>
          <td>
            3
          </td>
        </tr>
        <tr>
          <td>
            巧克力
          </td>
          <td>
            $200
          </td>
          <td>
            3
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

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