Question

我想给我的第一个和最后一个<td>一个border-radius，以便我的表看起来像一个圆桌。

首先，我将背景应用于我的<td>，然后添加了border-radius，我觉得这很正常（背景从角落四舍五入）。

之后，当我向我的<td>应用边框时，我看到了一个奇怪的事情（见下面的代码段）。

所以我的问题是为什么边框不是圆形背景？

Stack Snippet

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>

Answer 1

尝试border-collapse: inherit;并制作＆＃39; border-spacing：0px;＆＃39;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

您可以尝试删除border-collapse：collapse;并添加cellspacing＆amp; 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>

Answer 3

只需更改

border-collapse: collapse;

并将其设置为

  border-collapse: separate;

Answer 4

请检查此解决方案，第一行和最后一行四舍五入。

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/

Answer 5

请查看更新的解决方案。

<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/

希望它会对你有所帮助。

边界半径和边界一起在表td

5 个答案: