首页>>Jquery文字>>响应式表格 table自适应(2020-09-18)

响应式表格 table自适应

响应式表格 table自适应
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <table id="table">  
  2.             <thead>  
  3.               <tr>  
  4.                 <th>Name</th>  
  5.                 <th>Age</th>  
  6.                 <th>Gender</th>  
  7.                 <th>Height</th>  
  8.                 <th>Province</th>  
  9.                 <th>Sport</th>  
  10.               </tr>  
  11.             </thead>  
  12.             <tbody>  
  13.               <tr>  
  14.                 <td>Jill Smith</td>  
  15.                 <td>25</td>   
  16.                 <td>Female</td>  
  17.                 <td>5'4</td>  
  18.                 <td>British Columbia</td>  
  19.                 <td>Volleyball</td>  
  20.               </tr>  
  21.               <tr>  
  22.                 <td>John Stone</td>  
  23.                 <td>30</td>   
  24.                 <td>Male</td>  
  25.                 <td>5'9</td>  
  26.                 <td>Ontario</td>  
  27.                 <td>Badminton</td>  
  28.               </tr>  
  29.               <tr>  
  30.                 <td>Jane Strip</td>  
  31.                 <td>29</td>   
  32.                 <td>Female</td>  
  33.                 <td>5'6</td>  
  34.                 <td>Manitoba</td>  
  35.                 <td>Hockey</td>  
  36.               </tr>  
  37.               <tr>  
  38.                 <td>Gary Mountain</td>  
  39.                 <td>21</td>   
  40.                 <td>Mail</td>  
  41.                 <td>5'8</td>  
  42.                 <td>Alberta</td>  
  43.                 <td>Curling</td>  
  44.               </tr>  
  45.               <tr>  
  46.                 <td>James Camera</td>  
  47.                 <td>31</td>   
  48.                 <td>Male</td>  
  49.                 <td>6'1</td>  
  50.                 <td>British Columbia</td>  
  51.                 <td>Hiking</td>  
  52.               </tr>  
  53.             </tbody>  
  54.           </table>  

 

JavaScript Code
  1. $(document).ready(function() {  
  2.           $('#table').basictable();  
  3.   
  4.           $('#table-breakpoint').basictable({  
  5.             breakpoint: 768  
  6.           });  
  7.   
  8.           $('#table-swap-axis').basictable({  
  9.             swapAxis: true  
  10.           });  
  11.   
  12.           $('#table-force-off').basictable({  
  13.             forceResponsive: true  
  14.           });  
  15.   
  16.           $('#table-no-resize').basictable({  
  17.             noResize: true  
  18.           });  
  19.   
  20.           $('#table-two-axis').basictable();  
  21.   
  22.           $('#table-max-height').basictable({  
  23.             tableWrapper: true  
  24.           });  
  25.         });  

 


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