CSS中的overflow:hidden属性会导致边框消失。

Question

我想渲染一张带有圆角的表格，且同时具备内外单边框。但是当overflow: hidden时，表格只有圆角却没有边框。所以我试图添加边框，并尝试使用border-collapse: collapse; 对表格进行整理，但似乎"border-collapse: collapse"与border-radius相矛盾。请参考我的示例。

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

- Matilda Yi Pan

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

- Suresh Ponnukalai

---

非常感谢您的回答。您的DEMO链接已经失效，所以我在这里保留了这个链接供未来查看：http://jsfiddle.net/matildayipan/6aru270p/。 - Matilda Yi Pan

Answer 2

我猜测问题出在border-radius

CSS

table {
    border-collapse: collapse;
    width: 600px;
    border:5px solid black;
    overflow: hidden;
}
tr, th, td {
    border:5px solid black;
}

演示

- Sunil Hari

---

border-radius不是问题！因为我需要它来给表格的角落赋予形状。请参考上面的解决方案~ - Matilda Yi Pan