[CSS+JS] 圆角表格单

2014-08-18 09:39:46 -0400

代码演示

任务细节	处理进程	虚假任务
看一看简单设计	100%	No
带阴影的CSS3表格	100%	Yes
表格边框圆角	50%	Yes
Take a stretch break	0%	Yes
在你的网页中加入本效果	100%	Yes

代码复制

<script type="text/javascript">
$(function() {
    $("table tr:nth-child(odd)").addClass("odd-row");
	$("table td:first-child, table th:first-child").addClass("first");
	$("table td:last-child, table th:last-child").addClass("last");
});
</script>
<style type="text/css">
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;}
a {color:#666;}
#content {width:65%; max-width:690px; margin:6% auto 0;}
table {
	overflow:hidden;
	border:1px solid #d3d3d3;
	background:#fefefe;
	width:70%;
	margin:5% auto 0;
	-moz-border-radius:5px; /* FF1+ */
	-webkit-border-radius:5px; /* Saf3-4 */
	border-radius:5px;
	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
th, td {padding:18px 28px 18px; text-align:center; }
th {padding-top:22px; text-shadow: 1px 1px 1px #fff; background:#e8eaeb;}
td {border-top:1px solid #e0e0e0; border-right:1px solid #e0e0e0;}
tr.odd-row td {background:#f6f6f6;}
td.first, th.first {text-align:left}
td.last {border-right:none;}
td {
	background: -moz-linear-gradient(100% 25% 90deg, #fefefe, #f9f9f9);
	background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f9f9f9), to(#fefefe));
}
tr.odd-row td {
background: -moz-linear-gradient(100% 25% 90deg, #f6f6f6, #f1f1f1);
background: -webkit-gradient(linear, 0% 0%, 0% 25%, from(#f1f1f1), to(#f6f6f6));
}
th {
	background: -moz-linear-gradient(100% 20% 90deg, #e8eaeb, #ededed);
	background: -webkit-gradient(linear, 0% 0%, 0% 20%, from(#ededed), to(#e8eaeb));
}
tr:first-child th.first {
	-moz-border-radius-topleft:5px;
	-webkit-border-top-left-radius:5px; /* Saf3-4 */
}
tr:first-child th.last {
	-moz-border-radius-topright:5px;
	-webkit-border-top-right-radius:5px; /* Saf3-4 */
}
tr:last-child td.first {
	-moz-border-radius-bottomleft:5px;
	-webkit-border-bottom-left-radius:5px; /* Saf3-4 */
}
tr:last-child td.last {
	-moz-border-radius-bottomright:5px;
	-webkit-border-bottom-right-radius:5px; /* Saf3-4 */
}
</style>
<link></head>
<body>
<div id="content">
    <table cellspacing="0">
    <tbody><tr class="odd-row"><th class="first">任务细节</th><th>处理进程</th><th class="last">虚假任务</th></tr>
    <tr><td class="first">看一看<a href="http://www.codefans.net/">简单设计</a></td><td>100%</td><td class="last">No</td></tr>
    <tr class="odd-row"><td class="first">带阴影的CSS3表格</td><td>100%</td><td class="last">Yes</td></tr>
    <tr><td class="first">表格边框圆角</td><td>50%</td><td class="last">Yes</td></tr>
    <tr class="odd-row"><td class="first">Take a stretch break</td><td>0%</td><td class="last">Yes</td></tr>
    <tr><td class="first">在你的网页中加入本效果</td><td>100%</td><td class="last">Yes</td></tr>
    </tbody></table>
</div>

«Newer Older»

Back to home

Subscribe | Register | Login | N