CSS - table 圆角 border radius -

Lixh1986

浏览: 1116461 次

最近访客更多访客>>

Z865785437029

akingde

ningzong

蕃薯耀

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

CSS - table 圆角 border radius

博客分类：

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>

查看图片附件

分享到：

CSS - li 元素显示在一行____ a 元素没有 ... | [css - hr ] border color 横线高度和颜色

2016-04-29 12:08
浏览 4569
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

CSS - table 圆角 border radius

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

CSS - table 圆角 border radius

评论

发表评论

相关推荐

Flex之 justify-content 和 flex-direction 的应用

CSS之页面元素飞入效果

CSS之垂直居中

Sass之&引用父选择器

HTML5之canvas之粒子效果

CSS之导航栏设计之 ul 之 li 标签排成一行

HTML5/CSS3鼠标滑过图片滤镜动画效果

CSS之提示框实现

Responsive Web Design（自响应式网页设计）

css 之 linear-gradient 之 进度条（progress bar）

在 css 中使用 @font-face

jQuery之mouseover,mouseover,mouseout,mouseleave

css:flex布局

网站页面配色

BootstrapCSS之Select

CSS样式之带边框的 Anchor（超链接）

bootstrap css之响应式导航栏

CSS之 white-space : pre

CSS - li 元素显示在一行____ a 元素没有下横线

[css - hr ] border color 横线高度和颜色

最近访客更多访客>>

css 之 linear-gradient 之进度条（progress bar）