jQuery响应式表格设计制作横向表格滚动条代码



260 1039 347



特效描述:jQuery 响应式表格 横向表格滚动条,横向表格滚动条

代码结构

1. 引入CSS

<link href='http://fonts.useso.com/css?family=Ubuntu:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

3. HTML代码

<section id="cd-table">
	<header class="cd-table-column">
		<h2>Features</h2>
		<ul>
			<li>Storage</li>
			<li>People</li>
			<li>Free trial</li>
			<li>Support</li>
			<li>Price</li>
		</ul>
	</header>
	<div class="cd-table-container">
		<div class="cd-table-wrapper">
			<div class="cd-table-column">
				<h2>Plan 1</h2>
				<ul>
					<li>1 GB</li>
					<li>2</li>
					<li>30 days</li>
					<li class="cd-unchecked"><span>No</span></li>
					<li>$9.99</li>
					<li><a class="cd-select" href="#0">Select</a></li>
				</ul>
			</div> <!-- cd-table-column -->
			<div class="cd-table-column">
				<h2>Plan 2</h2>
				<ul>
					<li>2 GB</li>
					<li>5</li>
					<li>30 days</li>
					<li class="cd-unchecked"><span>No</span></li>
					<li>$19.99</li>
					<li><a class="cd-select" href="#0">Select</a></li>
				</ul>
			</div> <!-- cd-table-column -->
			<div class="cd-table-column">
				<h2>Plan 3</h2>
				<ul>
					<li>5 GB</li>
					<li>10</li>
					<li>30 days</li>
					<li class="cd-checked"><span>Yes</span></li>
					<li>$29.99</li>
					<li><a class="cd-select" href="#0">Select</a></li>
				</ul>
			</div> <!-- cd-table-column -->
			<div class="cd-table-column">
				<h2>Plan 4</h2>
				<ul>
					<li>10 GB</li>
					<li>20</li>
					<li>30 days</li>
					<li class="cd-checked"><span>Yes</span></li>
					<li>$39.99</li>
					<li><a class="cd-select" href="#0">Select</a></li>
				</ul>
			</div> <!-- cd-table-column -->
			<div class="cd-table-column">
				<h2>Plan 5</h2>
				<ul>
					<li>20 GB</li>
					<li>Unlimited</li>
					<li>30 days</li>
					<li class="cd-checked"><span>Yes</span></li>
					<li>$49.99</li>
					<li><a class="cd-select" href="#0">Select</a></li>
				</ul>
			</div> <!-- cd-table-column -->
		</div> <!-- cd-table-wrapper -->
	</div> <!-- cd-table-container -->
	<em class="cd-scroll-right"></em>
</section> <!-- cd-table -->



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动 滚动条 页面滚动 滚动插件 滚动条插件 滚动条美化 自动滚动图片轮播 滑动星星打分 其他 文字滚动 文字无缝滚动 文字间歇滚动 table表格 表格插件

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到