Jquery 数据表到响应数据表

问题
我是数据表的新手，从未创建过响应数据表。所以我可能需要很多帮助。

这是 JQuery 数据表的可编辑链接。我想创建响应式的。我做的第一件事是，我删除了它的容器宽度，现在它调整为平板电脑大小的屏幕，看起来还不错。

1. #fw_container {
   
2.     margin: 0 auto;
   
3.     max-width: 90%;
   
4.     padding-top: 2em;
   
5. }
   
6. .full_width {
   
7.     width: 90%;
   
8. }

复制代码

但是屏幕的尺寸比那张桌子小。

我希望数据表像这样工作。

我无法为您提供指向我的网站的链接，我已经实施了该链接，因为它位于网站管理面板中。

任何想法/有用的链接或方向都会帮助我。谢谢！

回答
在响应式设计中，大多数技巧都是使用百分比值完成的，直到我们开始使用@media 进行查询。

对于您的示例，我相信您可以管理 th 和 td 标签使用的百分比，但如果它小于 40em，那么完全不同的 CSS 将控制如下；

1. //when width less than 40em you can also use px
   
2. @media (max-width: 40em)
   
3. {
   
4.    // show every item as a line
   
5.    .movie-list td, .movie-list th {
   
6.    width: 100%;
   
7.    -webkit-box-sizing: border-box;
   
8.    -moz-box-sizing: border-box;
   
9.    box-sizing: border-box;
   
10.    float: left;
    
11.    clear: left;
    
12.   }
    
13.     //for th and .titles display them as a big bold title with different background color
    
14.     .movie-list tbody th, .movie-list tbody td.title {
    
15.     display: block;
    
16.     font-size: 1.2em;
    
17.     line-height: 110%;
    
18.     padding: .5em .5em;
    
19.     background-color: #fff;
    
20.     color: #77bbff;
    
21.     -moz-box-shadow: 0 1px 6px rgba(0,0,0,.1);
    
22.     -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.1);
    
23.     box-shadow: 0 1px 6px rgba(0,0,0,.1);
    
24.     }
    
25. 
    
26.     //for th only this is only for margin to override previous css
    
27.     .movie-list tbody th {
    
28.        margin-top: 0;
    
29.        text-align: left;
    
30.      }
    
31. }
    

复制代码

希望这会有所帮助这只是开始；

在这里你的鱼友:) 只需使用开发工具栏并在代码下添加 h2 实时示例标签；

1. <style>
   
2. // check if it is a small device ipad iphone android etc.
   
3. // google for example 'css  media queries for mobile"
   
4. @media (max-width: 40em) {
   
5.   // just did something to display second row use your skills
   
6.   table#example tr.even
   
7.   {
   
8.      border: 2px solid red;
   
9.   }  
   
10. // exactly the same with other one to display td as rows
    
11. // with css selector you can hide first one display 2nd one like a title etc
    
12. table#example tr td
    
13.   {
    
14.   background-color:white;
    
15.      width: 90%;
    
16.    -webkit-box-sizing: border-box;
    
17.    -moz-box-sizing: border-box;
    
18.    box-sizing: border-box;
    
19.    float: left;
    
20.    clear: left;
    
21.   }  
    
22.   // remove the thead as we dont need it
    
23.   // you should do similar to the footer as well
    
24.   table#example thead
    
25.   {
    
26.      display:none;
    
27.   }  
    
28.   // hide unwanted pagination elements
    
29.   table#example ~ div.fg-toolbar div#example_info,
    
30.     table#example ~ div.fg-toolbar div a
    
31.   {
    
32.   display:none;
    
33.   }
    
34.   // and only display next and prev
    
35.   // it s not what I actually wanted to make it more tab able make it bigger and try to cover half of the row.  
    
36.   table#example ~ div.fg-toolbar div a#example_previous,
    
37.   table#example ~ div.fg-toolbar div a#example_next
    
38.   {
    
39.   display:inline-block;
    
40.   width:46% !important;
    
41. 
    
42.   }
    
43. }
    
44. 
    
45. </style>

复制代码

据我所知，编辑和添加工作，因为这是完整的 css，你必须更深入地挖掘。