css 溢出隐藏导致边框消失

Question

我想渲染一个圆 Angular 的表格，但也有内外单边框。奇怪的是，溢出时表格只有圆 Angular :隐藏；但边界也消失了。所以我尝试添加边框并尝试使用 border-collapse: collapse;整理 table ，但似乎“边界崩溃:崩溃”与边界半径相矛盾。

请看我的例子。

<table >

    <tr>
        <th>Most </th>
        <th>Reasons</th>
        <th>Least</th>
    </tr>

    <tr>
        <td id="most_1">m1</td>
        <td id="reason_1" >reason1</td>
        <td id="least_1">l1</td>

    </tr>

    <tr>
        <td id="most_2">m2</td>
        <td id="reason_2">reason2</td>
        <td id="least_2">l2</td>
    </tr>

table{
border-collapse: collapse;
width: 600px;
border:5px solid black;
border-radius: 10px 40px 40px 10px;      
overflow: hidden;

}
tr, th, td{
    border:5px solid black;

}

http://jsfiddle.net/matildayipan/bosthe75/

Answer 1

将 border-radius 应用于表格不是一个好主意。您可以通过更改结构来实现如下所示的结果。

HTML

 <div class="roundborder">
  <table border="0">        
    <tr>
        <th>Most </th>
        <th>Reasons</th>
        <th>Least</th>
    </tr>

    <tr>
        <td id="most_1">m1</td>
        <td id="reason_1" >reason1</td>
        <td id="least_1">l1</td>

    </tr>

    <tr>
        <td id="most_2">m2</td>
        <td id="reason_2">reason2</td>
        <td id="least_2">l2</td>
    </tr>            
   </table>
  </div>

CSS

 .roundborder{
 border:5px solid black;
border-radius: 10px 40px 40px 10px; 
width:600px;
}
.roundborder table{
border-collapse: collapse;
width: 600px;
//overflow: hidden; 
}
.roundborder th, .roundborder td{
border-right:5px solid black;  
border-bottom:5px solid black;
}
.roundborder th:last-child,.roundborder td:last-child
{
 border-right:0px;
}
.roundborder tr:last-child td
{
border-bottom:0px;
}

DEMO