CSS - table 圆角 border radius

最新推荐文章于 2024-08-12 20:02:47 发布

iteye_3352

最新推荐文章于 2024-08-12 20:02:47 发布

阅读量257

点赞数

分类专栏： css 文章标签： css table border radius 圆角

本文链接：https://blog.csdn.net/iteye_3352/article/details/82651263

版权

css 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

[b]效果：[/b]

[img]http://dl2.iteye.com/upload/attachment/0117/0603/f75e76df-2d2b-3863-8fe0-3c49b8e9bd90.png[/img]

[b]代码：[/b]


<!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>