Clever Geek Handbook

Css overflow hidden cause borders disappear

I want to display a table with a round corner but also one border inside and outside. It is strange that the table has a rounded corner on overflow: hidden; but the boundaries also disappear. So I tried to add a border and tried using border-collapse: collapse; to clear the table, but borderline collapse: collapse seems to contradict the border radius.

See my example.

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

+3


source to share


2 answers


Applying a bounding radius to a table is not a good idea. You can achieve your result for changing the structure as shown below.

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

+2


source


I think border-radius

there is a problem

CSS



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

DEMO

0


source






More articles:


All Articles