關於table邊框，設置了border-collapse:collapse之後，設置border-radius沒效果
阿新 • • 發佈：2017-12-14
tle rate -c table tr ddd eight lap lang 重新
做項目遇到邊框需要設置圓角，然後發現在設置了border-collapse:collapse之後，border-radius:10px不起作用了，發現這個是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等的邊框樣式。
歡迎有更好的方法的網友指正。
關於table邊框，設置了border-collapse:collapse之後，設置border-radius沒效果