Jquery Datatable 到响应式数据表 [英] Jquery Datatable to responsive data tables
问题描述
我是数据表的新手,从未创建过响应式数据表.所以我可能需要很多帮助.
I am new to data tables and never created a responsive data tables. So i may be asking much help.
这是 JQuery 数据表可编辑项的链接.我想创建它响应.我做的第一件事是移除它的容器宽度,现在它调整到平板电脑大小的屏幕,看起来不错.
Here is link for JQuery data tables editables. I want to create it responsive. First thing i did i removed its container width now its resizing to tablet size screen and looks ok.
#fw_container {
margin: 0 auto;
max-width: 90%;
padding-top: 2em;
}
.full_width {
width: 90%;
}
但是在屏幕下方的尺寸上,表格很乱.
But on the screen size below than that tables are messing up.
我希望数据表像这个一样工作.
我无法向您提供我实际实施的站点链接,因为它位于站点管理面板中.
I can't give you my site link where i have actually implemented because its in site admin panel.
任何想法/有用的链接或方向都会对我有所帮助.非常感谢!
Any thoughts/helpful links or direction will be helpful to me. Thanks a lot!
推荐答案
在响应式设计中,大多数技巧都是由百分比值完成的,直到某个点,然后我们开始使用@media 查询.
In responsive design most of the tricks done by percentage values until a certain point and after that we start using @media queries.
对于您的示例,我相信您可以管理用于 th 和 td 标签的百分比,但如果它小于 40em,则完全不同的 CSS 将进行如下控制;
For your example just percentages used for the th and td tag I belive you can manage it but if it is smaller than 40em then completely different CSS take control like below;
//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;
}
}
希望这有助于这只是一个开始;
hope this help this is just give some start;
这里是你的鱼友:) 只需使用开发人员工具栏并在 h2 Live Example 标签下添加代码;
here your fish mate :) just use developer tool bar and add the code under the h2 Live Example tag;
<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,只是你必须深入挖掘.
As far as I can tell the edit and add stuffs are working as this is completely css just you have to dig deeper.
这篇关于Jquery Datatable 到响应式数据表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!