如何在没有锐角的情况下在TH上设置圆形边框？

Question

试着让我的桌子看起来不错，但我无法摆脱那些尖锐的角落......

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

这是边界像素与角像素的问题。在这种情况下，将border增加到2px会解决此问题：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是你看到的尖锐的红色事物，

style="background-color: #bb1133; 

接受的答案并不能完全解决问题，因为如果你真的需要边界是1px，例如在这种情况下。为什么当你可以做这样的事情时增加边界，

table { border-collapse: separate; }
tr:first-child th:first-child { border-top-left-radius: 5px; }
tr:first-child th:last-child { border-top-right-radius: 5px; }

这解决了边界半径问题而不改变边界本身，需要为1像素。使角的边界半径为5px，不留间隙。我的答案是正确的解决方案。

Answer 3

您可以为左右角添加一个类......

CSS

.thleft {
   border-radius: 6px 0 0 0;
}

.thright {
   border-radius: 0 6px  0 0;
}

HTML

<th class="thleft">aaa</th>
<th>bbb</th>
<th class="thright">ccc</th>

JSFiddle here