在表格单元格中同时使用边框半径和边框。

Question

我想给我的第一个和最后一个 <td> 添加 border-radius，以使我的表格看起来像一个圆角表格。

首先我给我的 <td> 应用了背景，然后添加了 border-radius，我认为这很好（从角落处开始的背景是圆角的）。

在此之后，当我给我的 <td> 应用边框时，我看到了一个奇怪的东西（请参见下面的片段）。

所以我的问题是为什么边框不像背景一样是圆角的？ 堆栈片段

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: center;
  font: 13px Verdana;
}

table td {
  border: 1px solid #000000;
  padding: 20px;
  background: red;
  color: #ffffff;
}

table tbody tr:first-child td:first-child {
  border-radius: 20px 0 0 0;
}

table tbody tr:first-child td:last-child {
  border-radius: 0 20px 0 0;
}

<table>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
</table>

- Bhuwan

---

一个奇怪的东西：你是指表格边框吗？是的，它在你的表格CSS中指定。 - ild flue

似乎是border-collapse属性阻止了圆角的显示。 - Naomi

嘿，border-collapse和border-radius是敌人。 这可能会有所帮助 https://dev59.com/BnRB5IYBdhLWcg3wa2u2 - George

可能是重复的问题：CSS3的border-radius属性和border-collapse:collapse不兼容。如何使用border-radius创建带有圆角的折叠表？ - Bram Vanroy

Answer 1

尝试使用border-collapse: inherit;并设置'border-spacing: 0px;'。

table {
  width: 100%;
  border-collapse: inherit;
  table-layout: fixed;
  text-align: center;
  font: 13px Verdana;
  border-radius: 30px;
  border-spacing: 0px;
}

table td {
  border: 1px solid #000000;
  padding: 20px;
  background: red;
  color: #ffffff;
  border-left: none;
}
table td:first-child{
  border-left: 1px solid #000000;
}
table tbody tr:first-child td:first-child {
  border-radius: 20px 0 0 0;
}

table tbody tr:first-child td:last-child {
  border-radius: 0 20px 0 0;
}

<table>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
</table>

- satyajit rout

---

谢谢回复！但是它在td中间给了我2像素的边框。 - Bhuwan

@BhuwanBhatt，请检查现在已将其边框设置为1像素。 - satyajit rout

@BhuwanBhatt 表格具有默认属性 border-collapse: separate; 因此继承属性将仅继承 separate，因此没有问题，或者您可以删除 border-collapse: inherit; 它也会起作用。 - satyajit rout

Answer 2

请查看此解决方案，其中第一行和最后一行被圆角化。

HTML

<table>
      <tr>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
      </tr>
      <tr>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
      </tr>
      <tr>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
      </tr>
</table>

CSS

table {
  width: 100%;
  border-collapse: separate;
  border-radius: 20px;
  table-layout: fixed;
  text-align: center;
  font: 13px Verdana;
}

table tr {
  border-radius: 20px;
}

table td {
  border: 1px solid #000000;
  padding: 20px;
  background: red;
  color: #ffffff;
}

table tr:first-child td:first-child {
  border-radius: 20px 0 0 0;
}

table tr:first-child td:last-child {
  border-radius: 0 20px 0 0;
}

table tr:last-child td:first-child {
  border-radius: 0 0 0 20px;
}

table tr:last-child td:last-child {
  border-radius: 0 0 20px 0;
}

我希望你能受益。

代码演示：https://jsfiddle.net/xwqjgb5k/

- Muhammad Awais Iqbal

---

谢谢，但我正在寻找一种边框应该被折叠而不是分离的解决方案。 - Bhuwan

Answer 3

只需更改

border-collapse: collapse;

并将其设置为

  border-collapse: separate;

- YGouddi

Answer 4

请检查更新后的解决方案。

<div class="table-wrapper">
<table>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
</table>
</div>

.table-wrapper {
  border-radius: 20px;
  overflow: hidden;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 20px;
  table-layout: fixed;
  text-align: center;
  font: 13px Verdana;
}

table tr {
  border-radius: 20px;
}

table td {
  border: 1px solid #000000;
  padding: 20px;
  background: red;
  color: #ffffff;
}

table tr:first-child td:first-child {
  border-radius: 20px 0 0 0;
}

table tr:first-child td:last-child {
  border-radius: 0 20px 0 0;
}

table tr:last-child td:first-child {
  border-radius: 0 0 0 20px;
}

table tr:last-child td:last-child {
  border-radius: 0 0 20px 0;
}

更新的代码片段链接：https://jsfiddle.net/xwqjgb5k/1/

希望能对你有所帮助。

- Muhammad Awais Iqbal

Answer 5

您可以尝试移除 border-collapse: collapse; 并将 cellspacing 和 cellpadding 设置为零。以下代码可能会对您有所帮助：

table {
  width: 100%;
 
  table-layout: fixed;
  text-align: center;
  font: 13px Verdana;
}

table td {
  border: 1px solid #000000;
  padding: 20px;
  background: red;
  color: #ffffff;
}

table tbody tr:first-child td:first-child {
  border-radius: 20px 0 0 0;
}

table tbody tr:first-child td:last-child {
  border-radius: 0 20px 0 0;
}

<table cellpadding="0" cellspacing="0">
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
</table>

- Azeez Kallayi

---

谢谢回复！但是它在td中间给了我2像素的边框。 - Bhuwan