边框半径在表格中无效

Question

以下是我的CSS：

.table_mem, .th_mem, .tr_mem, .td_mem{
    border: 1px solid #000000;
    border-radius: 20px;
    border-collapse: collapse;
    text-align: center;
   padding: 7px;
}
.th_mem{ background-color: #9e9e9e;}
.tr_mem{ background-color: #e5e5e5; transition: .5s;}
.tr_mem:hover{ background-color: #bfbfbf; }

的border-radius只对表格背景生效，而边框仍然是直角的。有人能给我提供一个解决方案吗？

- raul1ro

---

我忘了说这个网站使用Bootstrap与我的CSS相结合。 - raul1ro

可能是重复问题：https://dev59.com/BnRB5IYBdhLWcg3wa2u2 CSS3的border-radius属性和border-collapse:collapse不兼容，我该如何解决？ - Tyler Roper

Answer 1

边框是直的，因为进行了折叠，请将border-collapse设置为separate以解决问题：

body { padding-top: 1em; }

.table_mem,
.table_mem thead th,
.table_mem tbody tr,
.table_mem tbody td {
  border: 1px solid #000000 !important;
  border-radius: 20px;
  border-collapse: separate;
  text-align: center;
  padding: 7px;
}

.table_mem thead th {
  background-color: #9e9e9e;
}

.table_mem tbody tr {
  background-color: #e5e5e5;
  transition: .5s;
}

.table_mem tbody tr:hover {
  background-color: #bfbfbf;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <table class="table table_mem">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[e-mail]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[e-mail]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[e-mail]</td>
      </tr>
    </tbody>
  </table>
</div>

jsfiddle: https://jsfiddle.net/azizn/kkv9guhx/

- Aziz