关于table边框，设置了border-collapse:collapse之后，设置border-radius没效果
生活随笔
收集整理的這篇文章主要介紹了
关于table边框，设置了border-collapse:collapse之后，设置border-radius没效果
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
做項(xiàng)目遇到邊框需要設(shè)置圓角，然后發(fā)現(xiàn)在設(shè)置了border-collapse:collapse之后，border-radius:10px不起作用了，發(fā)現(xiàn)這個是css本身的問題，兩者不能混在一起使用。
代碼：
<!DOCTYPE html><html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
padding: 60px;
}
table {
width: 400px;
height: 200px;
border: 1px solid #ddd;
border-collapse: collapse;
}
table tr td {
padding: 20px;
border: 1px solid #ddd;
}
table tr th {
padding: 20px;
border: 1px solid #ddd;
border-radius: 10px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>王皓</td>
<td>男</td>
<td>28</td>
</tr>
<tr>
<td>2</td>
<td>王皓</td>
<td>男</td>
<td>28</td>
</tr>
<tr>
<td>3</td>
<td>王皓</td>
<td>男</td>
<td>28</td>
</tr>
<tr>
<td>4</td>
<td>王皓</td>
<td>男</td>
<td>28</td>
</tr>
</tbody>
</table>
</body>
</html>
效果圖：
解決方法：
個人采取了比較笨拙的方法，將border-collapse屬性值改為separate，并重新在CSS中寫table td等的邊框樣式。
歡迎有更好的方法的網(wǎng)友指正。
轉(zhuǎn)載于:https://www.cnblogs.com/chuyanfenfei/p/8034689.html
總結(jié)
以上是生活随笔為你收集整理的关于table边框，设置了border-collapse:collapse之后，设置border-radius没效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： LVS负载均衡下session共享的实现
- 下一篇： AXURE RP8实战手册(完整版)