Javascript html表格的滑块功能

我有一个简单的html表，我需要使用jQuery应用排序和滑动功能。我使用DataTable.js jQuery库应用了排序。排序工作正常，但不知道如何将滑块应用于表，如下图所示，使滑块中的所有主题列、学生姓名和总列固定不变

谁能告诉我一些解决办法吗

我的代码如下所示

脚本

$(document).ready(function () {
    myTable= $('#myTable').dataTable({
            "bInfo": false,
            "bLengthChange": false,
            "bPaginate": false
    });
});

html

<table id="myTable" cellpadding="0" cellspacing="0" border="0">
    <thead>
        <tr>
            <th>Student</th>
            <th>Maths</th>
            <th>Physics</th>
            <th>Geography</th>
            <th>History</th>
            <th>English</th>
            <th>Computer</th>
            <th>Biology</th>
            <th>Chemistry</th>
            <th>Total</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Jeffrey</td>
            <td>55</td>
            <td>22</td>
            <td>66</td>
            <td>32</td>
            <td>34</td>
            <td>56</td>
            <td>67</td>
            <td>85</td>
            <td>445</td>
        </tr>
        <tr>
            <td>Mathew</td>
            <td>32</td>
            <td>43</td>
            <td>45</td>
            <td>76</td>
            <td>78</td>
            <td>98</td>
            <td>87</td>
            <td>77</td>
            <td>545</td>
        </tr>
        <tr>
            <td>Linson</td>
            <td>23</td>
            <td>87</td>
            <td>87</td>
            <td>98</td>
            <td>97</td>
            <td>86</td>
            <td>75</td>
            <td>75</td>
            <td>454</td>
        </tr>
        <tr>
            <td>Filson</td>
            <td>45</td>
            <td>76</td>
            <td>87</td>
            <td>77</td>
            <td>88</td>
            <td>55</td>
            <td>78</td>
            <td>98</td>
            <td>545</td>
        </tr>
        <tr>
            <td>Felix</td>
            <td>87</td>
            <td>90</td>
            <td>90</td>
            <td>89</td>
            <td>97</td>
            <td>96</td>
            <td>70</td>
            <td>86</td>
            <td>565</td>
        </tr>
        <tr>
            <td>Akhil</td>
            <td>78</td>
            <td>98</td>
            <td>65</td>
            <td>65</td>
            <td>67</td>
            <td>56</td>
            <td>87</td>
            <td>90</td>
            <td>676</td>
        </tr>
        <tr>
            <td>Arjun</td>
            <td>67</td>
            <td>88</td>
            <td>77</td>
            <td>66</td>
            <td>55</td>
            <td>44</td>
            <td>45</td>
            <td>45</td>
            <td>788</td>
        </tr>
        <tr>
            <td>Arun</td>
            <td>57</td>
            <td>87</td>
            <td>55</td>
            <td>66</td>
            <td>77</td>
            <td>88</td>
            <td>99</td>
            <td>77</td>
            <td>898</td>
        </tr>
    </tbody>
</table>

学生
数学
物理
地理
历史
英语
电脑类
生物
化学
全部的
杰弗里
55
22
66
32
34
56
67
85
445
马修
32
43
45
76
78
98
87
77
545
林森
23
87
87
98
97
86
75
75
454
菲尔森
45
76
87
77
88
55
78
98
545
费利克斯
87
90
90
89
97
96
70
86
565
阿克希尔
78
98
65
65
67
56
87
90
676
阿琼
67
88
77
66
55
44
45
45
788
阿伦
57
87
55
66
77
88
99
77
898

将scrollX添加到数据表中

     $(document).ready(function() {
       $('#example').dataTable( {
         "scrollX": true
       } );
     } );

---

固定标题插件可以帮助你解决这个问题。您可以在中看到固定标题

---

更新了

但是这是一个滚动条，而且我们无法修复学生和总列。你能给我一个JSFIDL吗？但是当我们向右滑动时，我们可以看到它在学生姓名列后面。是的，你可能需要稍微处理一下，我相信你会成功，就像上面的例子一样，也会冻结最后一列，因为它的功能说你可以冻结2列或更多列，就像你说我成功了一样，但是我怎么能把滚动条限制在可滚动列上呢？现在滚动条被应用到整个表中，包括固定列，很高兴知道你已经解决了这个问题，我不知道他们是否有限制滚动到特定列的东西，这看起来也有点奇怪。