[英]Need to make fixed width datatables responsive
I have datatables used with twitter bootstrap in a container at the bottom of my page. 我在页面底部的容器中有与twitter bootstrap一起使用的数据表。 The tables were responsive and adjusted with screen size, but I wanted to fix a few of the tables with fixed widths to make them smaller (in width).
这些表响应灵敏并根据屏幕大小进行了调整,但我想修复一些固定宽度的表以使其变小(宽度)。 I fixed the widths of the table data with
我用固定了表格数据的宽度
var resizeTable1 = document.getElementById("myTable1");
resizeTable1 .style.width = "1000px";
$("#table1-tab").find('.dataTables_scrollHead').css('width','1000px');
$("#table1-tab").find('.dataTables_scrollHeadInner').css('width','1000px');
$('.column1').css('width','78px');
$('.column2').css('width','305px');
$('.column3').css('width','69px');
$('.column4').css('width','69px');
$('.column5').css('width','127px');
$('.column6').css('width','127px');
$('.column7').css('width','114px');
$('.column8').css('width','115px');
however, by fixing the column and title widths, i cannot get the scrollbar responsive ability anymore when I make the screen smaller than the table width. 但是,通过固定列和标题的宽度,当我使屏幕小于表格的宽度时,我再也无法获得滚动条的响应能力。 Is it not possible to have a fixed width table and scrollbar?
不可能有固定宽度的表格和滚动条? thanks!
谢谢!
如果您正在寻找滚动条,这对您有用吗?
$("#myTable1").css('overflow', 'auto');
I think css 3 media queries should help you or maybe consider using this bootstrap extension: http://themergency.com/footable/ 我认为CSS 3 媒体查询应该对您有所帮助,或者可以考虑使用此引导扩展程序: http : //themergency.com/footable/
With media queries you could write something like this: 使用媒体查询,您可以编写如下内容:
@media screen and (max-width: 768px) {
#myTable1 {
width: 100%;
}
}
This makes the table responsive again for a screenwidth lower then the given 768px. 这使表再次响应屏幕宽度小于给定的768px。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.