问题
我是数据表的新手,从未创建过响应数据表。所以我可能需要很多帮助。
这是 JQuery 数据表的可编辑链接。我想创建响应式的。我做的第一件事是,我删除了它的容器宽度,现在它调整为平板电脑大小的屏幕,看起来还不错。
- #fw_container {
- margin: 0 auto;
- max-width: 90%;
- padding-top: 2em;
- }
- .full_width {
- width: 90%;
- }
复制代码
但是屏幕的尺寸比那张桌子小。
我希望数据表像这样工作。
我无法为您提供指向我的网站的链接,我已经实施了该链接,因为它位于网站管理面板中。
任何想法/有用的链接或方向都会帮助我。谢谢!
回答
在响应式设计中,大多数技巧都是使用百分比值完成的,直到我们开始使用@media 进行查询。
对于您的示例,我相信您可以管理 th 和 td 标签使用的百分比,但如果它小于 40em,那么完全不同的 CSS 将控制如下;
- //when width less than 40em you can also use px
- @media (max-width: 40em)
- {
- // show every item as a line
- .movie-list td, .movie-list th {
- width: 100%;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- float: left;
- clear: left;
- }
- //for th and .titles display them as a big bold title with different background color
- .movie-list tbody th, .movie-list tbody td.title {
- display: block;
- font-size: 1.2em;
- line-height: 110%;
- padding: .5em .5em;
- background-color: #fff;
- color: #77bbff;
- -moz-box-shadow: 0 1px 6px rgba(0,0,0,.1);
- -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.1);
- box-shadow: 0 1px 6px rgba(0,0,0,.1);
- }
- //for th only this is only for margin to override previous css
- .movie-list tbody th {
- margin-top: 0;
- text-align: left;
- }
- }
复制代码
希望这会有所帮助这只是开始;
在这里你的鱼友:) 只需使用开发工具栏并在代码下添加 h2 实时示例标签;
- <style>
- // check if it is a small device ipad iphone android etc.
- // google for example 'css media queries for mobile"
- @media (max-width: 40em) {
- // just did something to display second row use your skills
- table#example tr.even
- {
- border: 2px solid red;
- }
- // exactly the same with other one to display td as rows
- // with css selector you can hide first one display 2nd one like a title etc
- table#example tr td
- {
- background-color:white;
- width: 90%;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- float: left;
- clear: left;
- }
- // remove the thead as we dont need it
- // you should do similar to the footer as well
- table#example thead
- {
- display:none;
- }
- // hide unwanted pagination elements
- table#example ~ div.fg-toolbar div#example_info,
- table#example ~ div.fg-toolbar div a
- {
- display:none;
- }
- // and only display next and prev
- // it s not what I actually wanted to make it more tab able make it bigger and try to cover half of the row.
- table#example ~ div.fg-toolbar div a#example_previous,
- table#example ~ div.fg-toolbar div a#example_next
- {
- display:inline-block;
- width:46% !important;
- }
- }
- </style>
复制代码
据我所知,编辑和添加工作,因为这是完整的 css,你必须更深入地挖掘。
|