Question

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

请看我的例子。

<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

Answer 2

我猜border-radius是问题

CSS

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

DEMO

css溢出隐藏原因边界消失

2 个答案: