web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置：
首页
>
网页特效
>
表格
可展开列的jQuery表格插件
分类：
表格
日期：
2024-05-14
点击(3)
评论(0)
演 示
免费下载
简介
##### 使用方法 在页面中引入下面的文件。 ```html <link rel="stylesheet" type="text/css" href="assets/css/demo.css" /> <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script> <script src="https://unpkg.com/imagesloaded@4.1.4/imagesloaded.pkgd.min.js"></script> <script src="assets/js/demo.js"></script> ``` ##### HTML结构 ```html <div class="loader"> <div class="lds-ripple"> <div></div> <div></div> </div> </div> <aside class="sidebar"> <div class="logo"> <a href="#">+</a> </div> </aside> <section class="table-wrapper"> <table> <thead> <tr> <th></th> <th class="trigger"><p>Basic</p></th> <th class="trigger"><p>Basic</p><span>plus</span></th> <th class="trigger"><p>Standard</p></th> <th class="trigger"><p>Standard</p><span>plus</span></th> <th class="trigger"><p>Medium</p></th> <th class="trigger"><p>Medium</p><span>plus</span></th> <th class="trigger"><p>Large</p></th> <th class="trigger"><p>Large</p><span>plus</span></th> <th class="trigger"><p>Extended</p></th> <th class="trigger"><p>Extended</p><span>plus</span></th> </tr> </thead> <tbody> <tr> <td><p><strong>Price</strong></p></td> <td><p>$19</p> <span>Per Month</span></td> <td><p>$29</p> <span>Per Month</span></td> <td><p>$39</p> <span>Per Month</span></td> <td><p>$49</p> <span>Per Month</span></td> <td><p>$59</p> <span>Per Month</span></td> <td><p>$69</p> <span>Per Month</span></td> <td><p>$79</p> <span>Per Month</span></td> <td><p>$89</p> <span>Per Month</span></td> <td><p>$99</p> <span>Per Month</span></td> <td><p>$129</p> <span>Per Month</span></td> </tr> <tr> <td><p><strong>Bandwidth</strong></p><p>Monthly</p></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <p>1GB *</p><span>Unlimited in first year</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <p>2GB *</p><span>Unlimited in first year</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <p>3GB *</p><span>Unlimited in first year</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <p>4GB *</p><span>Unlimited in first year</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <p>5GB *</p><span>Unlimited in first year</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <p>6GB *</p><span>Unlimited in first year</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <p>7GB *</p><span>Unlimited in first year</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <p>8GB *</p><span>Unlimited in first year</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <p>9GB *</p><span>Unlimited in first year</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <p>12GB *</p><span>Unlimited in first year</span></td> </tr> <tr> <td><p><strong>Storage</strong></p><p>Free installation</p></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <p>1GB *</p><span>Free installation</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <p>2GB *</p><span>Free installation</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <p>3GB *</p><span>Free installation</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <p>4GB *</p><span>Free installation</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <p>5GB *</p><span>Free installation</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <p>6GB *</p><span>Free installation</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <p>7GB *</p><span>Free installation</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <p>8GB *</p><span>Free installation</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <p>9GB *</p><span>Free installation</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <p>12GB *</p><span>Free installation</span></td> </tr> <tr> <td><p><strong>Add Ons</strong></p><p>Sub domains</p></td> <td><img src="assets/img/icon-close.png" class="close" alt=""/> <p>- *</p> <span>Without Sub domain</span></td> <td><img src="assets/img/icon-close.png" class="close" alt=""/> <p>- *</p> <span>Without Sub domain</span></td> <td><img src="assets/img/icon-close.png" class="close" alt=""/> <p>- *</p> <span>Without Sub domain</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <p>1 *</p> <span>Sub domain</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <p>2 *</p> <span>Sub domains</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <p>3 *</p> <span>Sub domains</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <p>4 *</p> <span>Sub domains</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <p>5 *</p> <span>Sub domains</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <p>6 *</p> <span>Sub domains</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <p>7 *</p> <span>Sub domains</span></td> </tr> <tr> <td><p><strong>Database</strong></p><p>Support</p></td> <td><img src="assets/img/icon-close.png" class="close" alt=""/> <p>- *</p> <span>Without Sub domain</span></td> <td><img src="assets/img/icon-close.png" class="close" alt=""/> <p>- *</p> <span>Without Sub domain</span></td> <td><img src="assets/img/icon-close.png" class="close" alt=""/> <p>- *</p> <span>Without Sub domain</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <p>1 *</p> <span>MySQL Database - Without Support</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <p>2 *</p> <span>MySQL Databases - Without Support</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <p>3 *</p> <span>MySQL Databases - Without Support</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <p>4 *</p> <span>MySQL Databases - With Support</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <p>5 *</p> <span>MySQL Databases - With Support</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <p>6 *</p> <span>MySQL Databases - With Support</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <p>7 *</p> <span>MySQL Databases - With Support</span></td> </tr> <tr> <td><p><strong>Backup</strong></p><p>Free (Yes/No)</p></td> <td><img src="assets/img/icon-close.png" class="close" alt=""/> <span>No.</span></td> <td><img src="assets/img/icon-close.png" class="close" alt=""/> <span>No.</span></td> <td><img src="assets/img/icon-close.png" class="close" alt=""/> <span>No.</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <span>Yes.</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <span>Yes.</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <span>Yes.</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <span>Yes.</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <span>Yes.</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <span>Yes.</span></td> <td><img src="assets/img/icon-correct.png" class="correct" alt=""/> <span>Yes.</span></td> </tr> </tbody> </table> </section> ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告
