javascript - DataTable 无法在小型设备上正确呈现

Question

我有一个正常工作的数据表，但我面临的问题是当我在小型设备上使用同一个表时它不能正常工作

片段

var data = [{
    "amount": 518212,
    "billdate": "2018-08-04",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 104801,
    "billdate": "2018-08-04",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 138151,
    "billdate": "2018-08-04",
    "outlet": "KOLAR"
  },
  {
    "amount": 628358,
    "billdate": "2018-08-05",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 115223,
    "billdate": "2018-08-05",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 134107,
    "billdate": "2018-08-05",
    "outlet": "KOLAR"
  },
  {
    "amount": 177866,
    "billdate": "2018-08-06",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 66095,
    "billdate": "2018-08-06",
    "outlet": "KOLAR"
  },
  {
    "amount": 284069,
    "billdate": "2018-08-07",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 58789,
    "billdate": "2018-08-07",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 67886,
    "billdate": "2018-08-07",
    "outlet": "KOLAR"
  },
  {
    "amount": 313128,
    "billdate": "2018-08-08",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 59939,
    "billdate": "2018-08-08",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 68558,
    "billdate": "2018-08-08",
    "outlet": "KOLAR"
  },
  {
    "amount": 321797,
    "billdate": "2018-08-09",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 64431,
    "billdate": "2018-08-09",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 57352,
    "billdate": "2018-08-09",
    "outlet": "KOLAR"
  },
  {
    "amount": 323556,
    "billdate": "2018-08-10",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 58772,
    "billdate": "2018-08-10",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 43722,
    "billdate": "2018-08-10",
    "outlet": "KOLAR"
  },
  {
    "amount": 464127,
    "billdate": "2018-08-11",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 93110,
    "billdate": "2018-08-11",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 62213,
    "billdate": "2018-08-11",
    "outlet": "KOLAR"
  },
  {
    "amount": 626772,
    "billdate": "2018-08-12",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 126933,
    "billdate": "2018-08-12",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 63119,
    "billdate": "2018-08-12",
    "outlet": "KOLAR"
  },
  {
    "amount": 167391,
    "billdate": "2018-08-13",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 27110,
    "billdate": "2018-08-13",
    "outlet": "KOLAR"
  },
  {
    "amount": 275115,
    "billdate": "2018-08-14",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 58633,
    "billdate": "2018-08-14",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 37920,
    "billdate": "2018-08-14",
    "outlet": "KOLAR"
  }
];
var columndef = [{
  title: "amount",
  data: "amount"
}, {
  title: "billdate",
  data: "billdate"
}, {
  title: "outlet",
  data: "outlet"
}];
$('#tbl').DataTable({
  columns: columndef,
  data: data,
  scrollY: '50vh',
  scrollCollapse: true,
  paging: false
});

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">

<table id="tbl" class="table table-striped table-bordered "></table>

现在在大型设备上它工作正常，但是当我在小型设备上使用它时，tbody 部分正确地水平滚动，但 thead 部分是静态的，这是在 ui 上看起来不太好。

要重现该问题，请调整浏览器大小并水平滚动是否有替代资源可供我使用？

Answer 1

我建议添加一个 scrollX: "100%" (通常你需要一个 scrollX 如果你使用 scrollY)到你的 datatables 选项以及 width: 100% 到您的 css 表格，这应该可以解决您的问题。请检查下面的代码和底部链接的 fiddle 。

var data = [{
    "amount": 518212,
    "billdate": "2018-08-04",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 104801,
    "billdate": "2018-08-04",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 138151,
    "billdate": "2018-08-04",
    "outlet": "KOLAR"
  },
  {
    "amount": 628358,
    "billdate": "2018-08-05",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 115223,
    "billdate": "2018-08-05",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 134107,
    "billdate": "2018-08-05",
    "outlet": "KOLAR"
  },
  {
    "amount": 177866,
    "billdate": "2018-08-06",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 66095,
    "billdate": "2018-08-06",
    "outlet": "KOLAR"
  },
  {
    "amount": 284069,
    "billdate": "2018-08-07",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 58789,
    "billdate": "2018-08-07",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 67886,
    "billdate": "2018-08-07",
    "outlet": "KOLAR"
  },
  {
    "amount": 313128,
    "billdate": "2018-08-08",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 59939,
    "billdate": "2018-08-08",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 68558,
    "billdate": "2018-08-08",
    "outlet": "KOLAR"
  },
  {
    "amount": 321797,
    "billdate": "2018-08-09",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 64431,
    "billdate": "2018-08-09",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 57352,
    "billdate": "2018-08-09",
    "outlet": "KOLAR"
  },
  {
    "amount": 323556,
    "billdate": "2018-08-10",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 58772,
    "billdate": "2018-08-10",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 43722,
    "billdate": "2018-08-10",
    "outlet": "KOLAR"
  },
  {
    "amount": 464127,
    "billdate": "2018-08-11",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 93110,
    "billdate": "2018-08-11",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 62213,
    "billdate": "2018-08-11",
    "outlet": "KOLAR"
  },
  {
    "amount": 626772,
    "billdate": "2018-08-12",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 126933,
    "billdate": "2018-08-12",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 63119,
    "billdate": "2018-08-12",
    "outlet": "KOLAR"
  },
  {
    "amount": 167391,
    "billdate": "2018-08-13",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 27110,
    "billdate": "2018-08-13",
    "outlet": "KOLAR"
  },
  {
    "amount": 275115,
    "billdate": "2018-08-14",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 58633,
    "billdate": "2018-08-14",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 37920,
    "billdate": "2018-08-14",
    "outlet": "KOLAR"
  }
];
var columndef = [{
  title: "amount",
  data: "amount"
}, {
  title: "billdate",
  data: "billdate"
}, {
  title: "outlet",
  data: "outlet"
}];
$('#tbl').DataTable({
  columns: columndef,
  "columnDefs": [{
    "className": "dt-left",
    "targets": "_all"
  }],
  data: data,
  scrollY: "50vh",
  responsive: true,
  paging: false,
  scrollX: "100%",
  scrollCollapse: true
});

#tbl {
  width: 100%!important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">

<table id="tbl" class="table table-striped table-bordered "></table>

fiddle :https://jsfiddle.net/bucvf6ek/2/