我正在尝试制作圆角边框表格。但是我在边界上遇到了一点问题,表格边框不是圆角的…
grid1 { width:100%; border:1px solid #000}
就是这个例子http://jsfiddle.net/NHNFx/
<table class="grid1">
<tr>
<th>Salutation</th>
<td>MR</td>
</tr>
<tr>
<th>First Name</th>
<td>Greg</td>
</tr>
<tr>
<th>Last Name</th>
<td>Oden</td>
</tr>
</table>
table { border-collapse:collapse; border-spacing:0; border:0; }
.grid1 { width:100%; border:1px solid #000}
.grid1 tr th { width:115px; padding:20px; background:blue; border-bottom:1px solid #c8c8c8; border-right:1px solid #c8c8c8;}
.grid1 tr td { padding:20px; background:#f9f9f9; border-bottom:1px solid #c8c8c8; }
.grid1 tr:first-child th { border-radius:2em 0 0 0; }
.grid1 tr:last-child th { border-radius:0 0 0 2em ; }
.grid1 tr:first-child td:last-child { border-radius:0 2em 0 0; }
.grid1 tr:last-child td:last-child { border-radius:0 0 2em 0 ; }
你需要删除border-collapse
属性,防止边框被圆润,无论如何,你使用border-spacing: 0;
,所以你不必使用border-collapse
为你的表
Try This
table {
border-collapse: separate;
border-spacing: 0;
}
table, td {
border: 1px solid #404040;
border-radius: 7px;
-moz-border-radius: 7px;
padding: 7px;
}