Slider functionality for html table

Question

I am having a plain html table which I need to apply sorting and sliding feature using jQuery. I have applied the sorting through by using DataTable.js jQuery library. Sorting is working fine but don't know how to apply slider to the table like as shown below making all the subjects columns within a slider and student name and total columns as fixed

Can anyone please tell me some solution for this?

My code is as given below

Working Demo

script

$(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>

Answer 1

Fixed header plugin could help you regarding this. You can see the fixed header in example here.

updatedJSFiddle example

Answer 2

https://datatables.net/examples/basic_init/scroll_x.html

Add scrollX to your dataTable

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