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

【问题标题】：CSS Table: bottom borders that don't touch and rounded cornersCSS表格：不接触的底部边框和圆角
【发布时间】：2018-11-11 17:56:22
【问题描述】：

这是我正在做的事情的小提琴：

http://jsfiddle.net/rSUhL/

我正在尝试复制此图像：

我已经很接近了。但是由于某种原因，当我在表格中添加边框半径时，它不会圆角。

另外，是否有可能使底部边框不接触框的侧面？

这是 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>

【问题讨论】：

如果您发现任何答案有帮助，您介意标记一个已接受的答案吗？干杯！

标签： html css html-table

【解决方案1】：

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

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

【讨论】：

【解决方案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;
 }

【讨论】：