CSS - table 圆角 border radius

效果:




代码:

<!DOCTYPE html>
<!-- saved from url=(0046)http://vamin.net/examples/rounded_tables2.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Rounded Tables with CSS3</title>
<style type="text/css">

table {
	background:#ccc;
	margin:20px;
	border:#ccc 1px solid;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px}
	
table th {padding:4px 10px}

table td {
	background:#fff;
	padding:2px 10px 4px 10px}
	
table tr.even td {background:#eee}

table tr:last-child td:first-child {
	-moz-border-radius-bottomleft:10px;
	-webkit-border-bottom-left-radius:10px;
	border-bottom-left-radius:10px}
	
table tr:last-child td:last-child {
	-moz-border-radius-bottomright:10px;
	-webkit-border-bottom-right-radius:10px;
	border-bottom-right-radius:10px}

table.collapsed {border-collapse:collapse}
		
</style>

<style type="text/css"></style></head>

<body>

<h1>Rounded Tables with CSS3</h1>	

<p>Works in newer versions of Safari and Firefox. Degrades gracefully to square corners in IE and Opera.</p>

<h2>Uncollapsed</h2>
<table>
	<tbody><tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
	<tr><td>1</td><td>1</td><td>2</td></tr>
	<tr class="even"><td>3</td><td>5</td><td>8</td></tr>
	<tr><td>13</td><td>21</td><td>34</td></tr>
	<tr class="even"><td>55</td><td>89</td><td>144</td></tr>
	<tr><td>233</td><td>377</td><td>610</td></tr>
</tbody></table>

<h2>Collapsed</h2>
<p>Border-radius does not apply to tables with the border-collapse:collapse property set.</p>
<table class="collapsed">
	<tbody><tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
	<tr><td>1</td><td>1</td><td>2</td></tr>
	<tr class="even"><td>3</td><td>5</td><td>8</td></tr>
	<tr><td>13</td><td>21</td><td>34</td></tr>
	<tr class="even"><td>55</td><td>89</td><td>144</td></tr>
	<tr><td>233</td><td>377</td><td>610</td></tr>
</tbody></table>

<h2>Cellspacing=0</h2>
<table cellspacing="0">
	<tbody><tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
	<tr><td>1</td><td>1</td><td>2</td></tr>
	<tr class="even"><td>3</td><td>5</td><td>8</td></tr>
	<tr><td>13</td><td>21</td><td>34</td></tr>
	<tr class="even"><td>55</td><td>89</td><td>144</td></tr>
	<tr><td>233</td><td>377</td><td>610</td></tr>
</tbody></table>


</body></html>

猜你喜欢

转载自lixh1986.iteye.com/blog/2294821
今日推荐