Jquery 数据表到响应数据表
问题我是数据表的新手，从未创建过响应数据表。所以我可能需要很多帮助。
这是 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 'cssmedia 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，你必须更深入地挖掘。
页:
[1]