Question

当使用带有jquery mobile的数据表时，我似乎无法获得水平滚动条。我已经尝试过sScrollX和sScrollY的所有组合。

要查看缺少垂直滚动条的示例，请尝试我提出的webapp示例here.

在iphone或其他小屏幕上尝试以下操作：

1）将滑块从Graph切换到Table 2）点击收藏夹按钮 3）向下滚动左侧面板，然后选择＆＃34; MSFT＆＃34;。

您只会看到前几列。您可以向上和向下滚动，但不能向右滚动。

我尝试过sScrollX和sScrollY，但滚动不一致且有问题。目前我已经禁用了两者，至少垂直滚动工作正常。

任何帮助都会非常感激，因为我现在已经打了一个星期了！

请在下面找到当前的数据表代码：

 var table = $('#table_container').dataTable( {
        "symbol": symbol,
        "exchange": exchange,
        "aoColumns": columnData,
        "aoColumnDefs": [
        { "aTargets": [0],      "mRender": function (data, type, full) {return dateFormat(data)} },
        { "aTargets": [1],      "mRender": function (data, type, full) {return volumeNumber(data)} },
        { "aTargets": [8],      "mRender": function (data, type, full) {return volumeNumber(data)} },
        { "aTargets": [14],      "mRender": function (data, type, full) {return volumeNumber(data)} },                           
        { "aTargets": ["_all"], "mRender": function (data, type, full) {return numberWithCommas(parseFloat(data).toFixed(2))} },
        ],
        "aaSorting": [[ 0, "desc" ]],
        "bPaginate": false,
        "bLengthChange": false,
        "bFilter": false,
        "bInfo": false,
        "bAutoWidth": false,
        "bProcessing": true,
        //"sScrollX": "100%",
        //"sScrollY": "100%",
        //"sDom": 'r<"H"lf><"datatable-scroll"t><"F"ip>',                        
        "bScrollCollapse": false,
        "bServerSide": true,
        "sAjaxSource": str,
        "bDeferRender": true,
        "fnServerData": function( sUrl, aoData, fnCallback ) {
            $.ajax( {
                "url": sUrl,
                "data": aoData,
                "success": fnCallback,
                "dataType": "jsonp",
                "cache": false
            } );
        }
    } );

Answer 1

试试这个

$(document).ready(function() {
    $('#example').dataTable( {
        "sScrollX": "100%",
        "sScrollXInner": "110%",
        "bScrollCollapse": true
    } );
} );

请参阅此Fiddle Demo

Answer 2

将表包裹在div中。

您可以将溢出值设置为自动。

<div class="table-container">
  <table>
    ...
  </table>
</div>

CSS

.table-container{
  overflow: auto
}

另一种方法是将overflow设置为hidden，然后设置overflow-x（水平滚动）滚动。这样做的好处是还允许您将-webkit-overflow-scrolling设置为touch，这样可以在移动设备上滚动动量。

CSS

.table-container{
  overflow: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}

Answer 3

我已根据您提供的链接检查了您的APP的CSS。

要使表格可以单独向任何方向滚动，您需要在 .dataTables_wrapper 类中设置所需的宽度和高度。垂直滚动在您的APP中有效，因为Table实际上并不是自己滚动，而是整页。如果您的APP在桌面下方没有任何其他内容，则表格高度可以一直设置到页面底部，否则您需要在底部有一个小的间隙，以便用户可以触摸并向下滚动这页纸。此外，如果您将应用程序瞄准不同的手机，那么您需要一些jquery代码来计算屏幕大小并动态更新 .dataTables_wrapper 类中的宽度和高度，以便该表适合左侧的屏幕正确而且最底层。如果表格内容长于大小，则会滚动任何多余的宽度和高度。如果APP仅适用于一个移动设备，那么它很容易在类中使用宽度和高度来获得所需的桌面大小。

示例

 .dataTables_wrapper {
  position: relative;
  clear: both;
  height: 400px;
  width: 400px;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  }

你的 main_container css应该是这样的，所以删除其余部分。否则你将有另一个不做任何事情的水平滚动条。

  #main_container {
  overflow: hidden;
  }

虽然滚动条通常隐藏在移动浏览器中，而不像桌面浏览器，但如果你想添加这个css技巧来隐藏它们的视图。此技巧仅适用于webkit浏览器，例如Google / Safari / Native Android等。

  ::-webkit-scrollbar {
   width: 0px;
   }

您可能有一个固定表标题的好主意，这样一个人可以在滚动时查看哪些数据与列相关。有很多方法可以实现这一点，下面我添加了一个我找到的链接

http://fixedheadertable.com/

DataTable水平滚动与jquery Mobile无法正常工作

3 个答案: