我试图制作圆形边框表。 但我对边境问题很少, 表边框没有圆角..
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 ; }
请帮助我...
答案 0 :(得分:4)
您需要移除border-collapse
属性,以防止边框被舍入,无论如何您正在使用border-spacing: 0;
,因此您不必将[{1}}用于表格
答案 1 :(得分:1)
试试这个
table {
border-collapse: separate;
border-spacing: 0;
}
table, td {
border: 1px solid #404040;
border-radius: 7px;
-moz-border-radius: 7px;
padding: 7px;
}