html - table 上的边框半径

Question

我正在为学校制作一个网站，其中一项要求是要有一个表格元素。我制作了一个表格元素并将边框半径设置为 25 像素。事实证明，边框保持默认半径，背景切割在 Angular 上。 Problem with borders image这是我使用的代码:

table {
  width: 750px;
  text-align: center;
  border: solid darkblue 5px;
  background-color: lightblue;
  margin-bottom: 25px;
  border-collapse: collapse;
  border-radius: 25px
}

<table style="margin-bottom: 25px;">
  <h2>Five Qualities</h2>
  <tr>
    <td>Creativity</td>
    <td>We want students here to be as creative as possible when planning out designs for their projects.</td>
  </tr>
  <tr>
    <td>Inquiry</td>
    <td>We want students to ask as many meaningful questions as they can when they don't understand a subject or want to know more</td>
    </p>
    <tr>
      <td>Collaboration</td>
      <td>When working on a project, we want all students to collaborate with their partners of group members in order to make the most of their time during a project work-day.</td>
    </tr>
    <tr>
      <td>Persistence</td>
      <td>When frustrated with a project, we want students to be persistent and keep working, even though they are frustrated.</td>
    </tr>
    <tr>
      <td>Communication</td>
      <td>We want our students to communicate with their group or partners to get work done in a way that everybody agrees on.</td>
    </tr>
</table>

Answer 1

使用 border-spacing:0 而不是 border-collapse:collapse 以允许绘制 border-radius。

table {
  width: 750px;
  text-align: center;
  border: solid darkblue 5px;
  background-color: lightblue;
  margin-bottom: 25px;
  border-spacing:0;
  border-radius: 25px
}

<table style="margin-bottom: 25px;">
  <h2>Five Qualities</h2>
  <tr>
    <td>Creativity</td>
    <td>We want students here to be as creative as possible when planning out designs for their projects.</td>
  </tr>
  <tr>
    <td>Inquiry</td>
    <td>We want students to ask as many meaningful questions as they can when they don't understand a subject or want to know more</td>
    </p>
    <tr>
      <td>Collaboration</td>
      <td>When working on a project, we want all students to collaborate with their partners of group members in order to make the most of their time during a project work-day.</td>
    </tr>
    <tr>
      <td>Persistence</td>
      <td>When frustrated with a project, we want students to be persistent and keep working, even though they are frustrated.</td>
    </tr>
    <tr>
      <td>Communication</td>
      <td>We want our students to communicate with their group or partners to get work done in a way that everybody agrees on.</td>
    </tr>
</table>