Question

我有一个表，并且使用ajax调用生成数据...我希望Object(...) is not a function在y轴上应该是粘性的，但是x轴在y轴上滚动并且都在x轴上滚动。

thead

HTML

$('.graphData table tbody, .graphData table thead').empty();

var listTitle = $('<tr></tr>').html('<td>Month</td><td>orders</td><td>products</td><td>sub total</td><td>shipping</td><td>coupon</td><td>bundle</td><td>credit</td><td>tax</td><td>total sale</td><td>total cost</td><td>total profit</td><td>profit [%]</td>');


$('.graphData table thead').append(listTitle);


$.each(json.graph_data, function(index){


  var list = $('<tr></tr>').html('<td>'+json.graph_data[index][0]+'</td><td>'+json.graph_data[index][1]+'</td><td>'+json.graph_data[index][2]+'</td><td>'+json.graph_data[index][3]+' AED</td><td>'+json.graph_data[index][4]+' AED</td><td>'+json.graph_data[index][5]+' AED</td><td>'+json.graph_data[index][6]+' AED</td><td>'+json.graph_data[index][7]+' AED</td><td>'+json.graph_data[index][8]+' AED</td><td class="sale">'+json.graph_data[index][9]+' AED</td><td class="cost">'+json.graph_data[index][10]+' AED</td><td class="profit">'+json.graph_data[index][11]+' AED</td><td class="profit">'+json.graph_data[index][12]+' %</td>');


  $('.graphData table tbody').append(list);

});

使用此代码...表和数据生成成功，但<div class="graphData" data-mcs-axis="yx" style="width:86.5% !important;"> <div class="graphDataTitle"> <table class="thead"> <thead></thead> </table> </div> <div class="graphDataInner"> <table> <tbody></tbody> </table> </div> </div>不粘。thead中的数据太多，所以我想在x和y轴上的tbody上添加滚动但是在x轴仅与tbody一起thead。

感谢您的任何建议和帮助......

Answer 1

正如您所提到的，您正在使用mCustomeScroll插件......您需要更改以下内容...

<强> HTML

<div class="graphData" data-mcs-axis="x">
    <table class="fixed_headers">
        <thead>

        </thead>
        <tbody >

        </tbody>
    </table>
</div>

适用于mCustomScroll的JavaScript

$(window).load(function(){

 $("table.fixed_headers tbody").mCustomScrollbar({
  mouseWheel:{ preventDefault: true },
  autoExpandScrollbar:true
 });

 $(".graphData").mCustomScrollbar({
  scrollbarPosition:"outside"
 });

});

更改ajax请求中的seletors

$('table.fixed_headers thead').append(listTitle);
$('table.fixed_headers tbody .mCSB_container').append(list);

Working CodePen

!!就是这样!!

Answer 2

最简单的方法是粘贴，但并非所有浏览器都支持。表格布局与普通表格布局不同，例如min-height和scoll不会对它们起作用，除非你开始对它们进行讨厌的攻击，例如display: block，然后你遇到其他布局问题。

＆＃13;

div {
  max-height: 150px;
  overflow: auto;
}

thead th {
  position: sticky;
  top: 0;
  background-color: white;
}

/* This is just to demonstrate that the table can horizontally scroll */
table {
  min-width: 800px;
}

＆＃13;

<div>
  <table>
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th> 
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Jill</td>
        <td>Smith</td> 
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td> 
        <td>94</td>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td> 
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td> 
        <td>94</td>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td> 
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td> 
        <td>94</td>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td> 
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td> 
        <td>94</td>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td> 
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td> 
        <td>94</td>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td> 
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td> 
        <td>94</td>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td> 
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td> 
        <td>94</td>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td> 
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td> 
        <td>94</td>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td> 
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td> 
        <td>94</td>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td> 
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td> 
        <td>94</td>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td> 
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td> 
        <td>94</td>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td> 
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td> 
        <td>94</td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

使用mCustomScroll添加修复标题xy滚动到表

2 个答案: