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



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

619 2474 825



特效描述: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 -->



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



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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