css - 如何在 TH 上放置圆形边框而不出现尖 Angular ？

Question

试图让我的 table 看起来漂亮，但我无法摆脱那些尖 Angular ......

这是 HTML

<table border="0" cellspacing="0" cellpadding="0" class="expense-table-pink">
<thead>
    <tr style="background-color: #bb1133;">
        <th>aaa</th>
        <th>bbb</th>
        <th>ccc</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>aaa</td>
        <td>bbb</td>
        <td>ccc</td>
    </tr>
</tbody>
</table>

还有 CSS

.expense-table-pink {
    width:100%; 
    background-color: #f9ecee;
    border: 1px solid #bb1133; 
    border-collapse: separate; 
    border-spacing: 0; 
    border-radius: 6px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;    
    font-weight: normal;     
}

Answer 1

这是边界像素与 Angular 像素的问题。在这种情况下，将 border 增加到 2px 可以解决此问题:

.expense-table-pink {
    width:100%; 
    background-color: #f9ecee;
    border: 2px solid #bb1133; 
    border-collapse: separate; 
    border-spacing: 0; 
    border-radius: 6px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;    
    font-weight: normal;
}

<table border="0" cellspacing="0" cellpadding="0" class="expense-table-pink">
<thead>
    <tr style="background-color: #bb1133;">
        <th>aaa</th>
        <th>bbb</th>
        <th>ccc</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>aaa</td>
        <td>bbb</td>
        <td>ccc</td>
    </tr>
</tbody>
</table>