Question

这是我正在努力的小提琴：

我正在尝试复制此图片：

我非常接近。但出于某种原因，当我将border-radius添加到表格时，它不会绕过角落。

此外，是否可以使底边框不会碰到盒子的一侧？

这是CSS：

table {
  border-collapse: collapse;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  font-size: 18px;
}

th, td {
  border: 1px solid #d8d8d8;
  border-collapse: collapse;
  padding: 25px;
}

th {
    text-align: right;
}

#blank {
    border: none;
}

caption {
    margin-bottom: 15px;
}

.blue {
    background-color: #2a9ce0;
    color: #fff;
    border-bottom: 1px solid #55ace0;
}

.small-text {
    font-size: 13px;
    margin-top: -5px;
}

HTML：

<table>
<caption>Is Mastermind Talks for you?</caption>
<tr>
    <th scope="row">Learning:</th>
    <td>Tabloids and Newspapers</td>
    <td class="blue">Books, blogs, seminars and peers</td>
</tr>
<tr>
    <th scope="row">Focus:</th>
    <td>Hourly or Salary</td>
    <td class="blue">Cashflow, net worth and network</td>
</tr>
<tr>
    <th scope="row">Financial Goals:</th>
    <td>To survive until the next payday</td>
    <td class="blue">To build passive income streams</td>
</tr>
<tr>
    <th scope="row">Rate of Return:</th>
    <td>Get Rich Quick</td>
    <td class="blue">Long-term</td>
</tr>
<tr>
    <th scope="row">Investments:</th>
    <td>Liabilities: Cars, houses, etc</td>
    <td class="blue">Assets: Yourself, business, etc</td>
</tr>
<tr>
    <th scope="row">Values:</th>
    <td>Currency</td>
    <td class="blue">Legacy</td>
</tr>
<tfoot>
    <td id="blank"></td>
    <td><strong>Middle Class Mindset</strong><br /> <span class="small-text">(mastermind is not for you)</span></td>
        <td class="blue"><i class="icon-bulb"></i><strong>Mastermind Mindset</strong><br /> <span class="small-text">(mastermind is for you)</span></td>
</tfoot>
</table>

Answer 1

如果border-radius设置为border-collapse，则collapse声明不适用于表格边框。在这种情况下，您必须在td元素的边界半径上定义边框。

或者，您可以使用border-collapse: separate;作为边界半径来处理表格本身。

Answer 2

更改

的班级名称

 <td class="blue">Books, blogs, seminars and peers</td>

和

<td class="blue"><i class="icon-bulb"></i><strong>Mastermind Mindset</strong><br /> <span class="small-text">(mastermind is for you)</span></td>

到

<td class="blue1">Books, blogs, seminars and peers</td>
<td class="blue2"><i class="icon-bulb"></i><strong>Mastermind Mindset</strong><br /> <span class="small-text">(mastermind is for you)</span></td>

然后在CSS中添加类：

.blue1{
  border-radius:8px 8px 0px 0px !important;
  background-color: #2a9ce0;
  color: #fff;
  border-bottom: 1px solid #55ace0; 
}

.blue2{
  border-radius:0px 0px 8px 8px !important;
  background-color: #2a9ce0;
  color: #fff;
  border-bottom: 1px solid #55ace0;
 }

CSS表：不接触和圆角的底部边框

2 个答案: