表中的圓角

Question

我需要創建一個包含兩列和第一列的表格，這些單元格只有一個底部邊框，其中第二列中的單元格的頂部和底部都有一個圓角。 我的代碼看起來像這樣，在資源管理器中工作，但在Firefox和Chrome它給了我圓角邊框加上正常的角落：

table { 
 
    border-collapse: collapse; 
 
    width: 50%; 
 
    font-family: Proxima Nova, Arial; 
 
} 
 

 
.h1 { 
 
    /*Head cell red*/ 
 
    text-align: center; 
 
    border: 1px solid #D81541; 
 
    border-radius: 20px 20px 0px 0px; 
 
    background-color: #D81541; 
 
    color: white; 
 
    font-size: 1.5em; 
 
    font-weight: bold; 
 
    width: 60%; 
 
} 
 

 
.td1 { 
 
    /*right column cells*/ 
 
    border: 1px solid #6D6E70; 
 
    text-align: left; 
 
    width: 60%; 
 
} 
 

 
.td2 { 
 
    /*left column cells bold*/ 
 
    border-bottom: 1px solid #6D6E70; 
 
    font-weight: bold; 
 
    vertical-align: top; 
 
} 
 

 
.td3 { 
 
    /*last cell right column*/ 
 
    border: 1px solid #6D6E70; 
 
    border-radius: 0px 0px 20px 20px; 
 
    text-align: left; 
 
    width: 60%; 
 
} 
 

 
.td4 { 
 
    /*last cell left column*/ 
 
    vertical-align: top; 
 
    font-weight: bold; 
 
}

<table> 
 
    <tr> 
 
    <td class="td2"></td> 
 
    <td class="h1">My top corners should be round</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="td2">bla</td> 
 
    <td class="td1">blabla</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="td4">last row</td> 
 
    <td class="td3">my bottom corners should be round</td> 
 
    </tr> 
 
</table>

Answer 1

剛剛從.table &刪除border-collapse: collapse;添加border-spacing:0它

檢查片段。感謝@Abhitalks爲他以前的小提琴。

table { 
 
    border-spacing: 0; 
 
    width: 50%; 
 
    font-family: Proxima Nova, Arial; 
 
} 
 

 
.h1 { 
 
    /*Head cell red*/ 
 
    text-align: center; 
 
    border: 1px solid #D81541; 
 
    border-radius: 20px 20px 0px 0px; 
 
    background-color: #D81541; 
 
    color: white; 
 
    font-size: 1.5em; 
 
    font-weight: bold; 
 
    width: 60%; 
 
} 
 

 
.td1 { 
 
    /*right column cells*/ 
 
    border: 1px solid #6D6E70; 
 
    text-align: left; 
 
    width: 60%; 
 
} 
 

 
.td2 { 
 
    /*left column cells bold*/ 
 
    border-bottom: 1px solid #6D6E70; 
 
    border-top: 1px solid #6D6E70; 
 
    font-weight: bold; 
 
    vertical-align: top; 
 
} 
 

 
.td3 { 
 
    /*last cell right column*/ 
 
    border: 1px solid #6D6E70; 
 
    border-radius: 0px 0px 20px 20px; 
 
    text-align: left; 
 
    width: 60%; 
 
} 
 

 
.td4 { 
 
    /*last cell left column*/ 
 
    vertical-align: top; 
 
    font-weight: bold; 
 
    border-top: 1px solid #6D6E70; 
 
} 
 
.td5 { 
 
    /*left column first cells*/ 
 
    border-bottom: 1px solid #6D6E70; 
 
    font-weight: bold; 
 
    vertical-align: top; 
 
}

<table> 
 
    <tr> 
 
    <td class="td5"></td> 
 
    <td class="h1">My top corners should be round</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="td2">bla</td> 
 
    <td class="td1">blabla</td> 
 
    </tr> 
 
    <tr> 
 
    <td class="td4">last row</td> 
 
    <td class="td3">my bottom corners should be round</td> 
 
    </tr> 
 
</table>

Answer 2

你試過嗎？

td 
{ 
    border-radious:0px; 
}