首页>>Jquery文字>>响应式表格美化(2020-08-26)

响应式表格美化

 表格不是标准表格，具体看代码。移动端会隐藏部分内容并显示一个拖动的箭头

响应式表格美化
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <section id="cd-table">  
  2.     <header class="cd-table-column">  
  3.         <h2>Features</h2>  
  4.         <ul>  
  5.             <li>Storage</li>  
  6.             <li>People</li>  
  7.             <li>Free trial</li>  
  8.             <li>Support</li>  
  9.             <li>Price</li>  
  10.         </ul>  
  11.     </header>  
  12.   
  13.     <div class="cd-table-container">  
  14.         <div class="cd-table-wrapper">  
  15.   
  16.             <div class="cd-table-column">  
  17.                 <h2>Plan 1</h2>  
  18.                 <ul>  
  19.                     <li>1 GB</li>  
  20.                     <li>2</li>  
  21.                     <li>30 days</li>  
  22.                     <li class="cd-unchecked"><span>No</span></li>  
  23.                     <li>$9.99</li>  
  24.                     <li><a class="cd-select" href="#0">Select</a></li>  
  25.                 </ul>  
  26.             </div> <!-- cd-table-column -->  
  27.   
  28.             <div class="cd-table-column">  
  29.                 <h2>Plan 2</h2>  
  30.                 <ul>  
  31.                     <li>2 GB</li>  
  32.                     <li>5</li>  
  33.                     <li>30 days</li>  
  34.                     <li class="cd-unchecked"><span>No</span></li>  
  35.                     <li>$19.99</li>  
  36.                     <li><a class="cd-select" href="#0">Select</a></li>  
  37.                 </ul>  
  38.             </div> <!-- cd-table-column -->  
  39.   
  40.             <div class="cd-table-column">  
  41.                 <h2>Plan 3</h2>  
  42.                 <ul>  
  43.                     <li>5 GB</li>  
  44.                     <li>10</li>  
  45.                     <li>30 days</li>  
  46.                     <li class="cd-checked"><span>Yes</span></li>  
  47.                     <li>$29.99</li>  
  48.                     <li><a class="cd-select" href="#0">Select</a></li>  
  49.                 </ul>  
  50.             </div> <!-- cd-table-column -->  
  51.   
  52.             <div class="cd-table-column">  
  53.                 <h2>Plan 4</h2>  
  54.                 <ul>  
  55.                     <li>10 GB</li>  
  56.                     <li>20</li>  
  57.                     <li>30 days</li>  
  58.                     <li class="cd-checked"><span>Yes</span></li>  
  59.                     <li>$39.99</li>  
  60.                     <li><a class="cd-select" href="#0">Select</a></li>  
  61.                 </ul>  
  62.             </div> <!-- cd-table-column -->  
  63.   
  64.             <div class="cd-table-column">  
  65.                 <h2>Plan 5</h2>  
  66.                 <ul>  
  67.                     <li>20 GB</li>  
  68.                     <li>Unlimited</li>  
  69.                     <li>30 days</li>  
  70.                     <li class="cd-checked"><span>Yes</span></li>  
  71.                     <li>$49.99</li>  
  72.                     <li><a class="cd-select" href="#0">Select</a></li>  
  73.                 </ul>  
  74.             </div> <!-- cd-table-column -->  
  75.   
  76.         </div> <!-- cd-table-wrapper -->  
  77.     </div> <!-- cd-table-container -->  
  78.   
  79.     <em class="cd-scroll-right"></em>  
  80. </section> <!-- cd-table -->  

 


原文地址:http://www.freejs.net/article_jquerywenzi_883.html