找回密码
 立即注册
example数据表displaybox | 软件设计/软件工程 2022-05-03 228 0star收藏 版权: . 保留作者信息 . 禁止商业使用 . 禁止修改作品
问题
我是数据表的新手,从未创建过响应数据表。所以我可能需要很多帮助。

这是 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.     //for th only this is only for margin to override previous css
  26.     .movie-list tbody th {
  27.        margin-top: 0;
  28.        text-align: left;
  29.      }
  30. }
复制代码

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

在这里你的鱼友:) 只需使用开发工具栏并在代码下添加 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. </style>
复制代码

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





上一篇:materialzile.css 转盘在移动设备上不起作用
下一篇:尽管在 CLI 上工作,但 PHP grpc 扩展在 WAMP 上不起作用