表头内的滑块

Question

我设计了html表，我需要在表头内滑块，第一个td是固定的poxition。我附上图片请检查一下。给我你的想法和意见。我该如何管理？我添加了我有html代码，我附加图像我需要输出。

<table style="border:1px solid #ccc;margin-left: 0px;border-right-width: 1px;border-right-style: solid;border-right-color: rgb(204, 204, 204);" id="student-monitor-table-data" class="student-monitor-table-data tablesorter tablesorter-default">
   <thead>
      <tr class="tablesorter-headerRow">
         <th class="student-name common-sorting headcol tablesorter-header tablesorter-headerAsc headerSortUp" data-column="0" tabindex="0" unselectable="on" style="-moz-user-select: none;">Name</th>
         <th class="student-score common-sorting tablesorter-header" data-column="1" tabindex="0" unselectable="on" style="-moz-user-select: none;">Score</th>
         <th data-type="question" style="text-align: center; -moz-user-select: none;" data-column="2" class="tablesorter-header" tabindex="0" unselectable="on">
            <div class="tablesorter-header-inner">Question 1</div>
         </th>
         <th data-type="question" style="text-align: center; -moz-user-select: none;" data-column="3" class="tablesorter-header" tabindex="0" unselectable="on">
            <div class="tablesorter-header-inner">Question 2</div>
         </th>
         <th data-type="question" style="text-align: center; -moz-user-select: none;" data-column="4" class="tablesorter-header" tabindex="0" unselectable="on">
            <div class="tablesorter-header-inner">Question 3</div>
         </th>
         <th data-type="question" style="text-align: center; -moz-user-select: none;" data-column="5" class="tablesorter-header" tabindex="0" unselectable="on">
            <div class="tablesorter-header-inner">Question 4</div>
         </th>
         <th data-type="question" style="text-align: center; -moz-user-select: none;" data-column="6" class="tablesorter-header" tabindex="0" unselectable="on">
            <div class="tablesorter-header-inner">Question 5</div>
         </th>
         <th data-type="question" style="text-align: center; -moz-user-select: none;" data-column="7" class="tablesorter-header" tabindex="0" unselectable="on">
            <div class="tablesorter-header-inner">Question 6</div>
         </th>
         <th data-type="question" style="text-align: center; -moz-user-select: none;" data-column="8" class="tablesorter-header" tabindex="0" unselectable="on">
            <div class="tablesorter-header-inner">Question 7</div>
         </th>
         <th data-type="resource" style="text-align: center; -moz-user-select: none;" data-column="9" class="tablesorter-header" tabindex="0" unselectable="on">
            <div class="tablesorter-header-inner">Resource 8</div>
         </th>
      </tr>
   </thead>
   <tbody>
      <tr data-index="1" user-score="84" class="odd">
         <td data-col-span="8" data-username="jennie" class="headcol">
            <div class="headcolUsername" style="margin-left:7%;">jennie</div>
         </td>
         <td style="text-align:center;">1%</td>
         <td >A
         </td>
         <td >A
         </td>
         <td >A
         </td>
         <td >A
         </td>
         <td >A
         </td>
         <td >A
         </td>
         <td >A
         </td>
         <td data-category="interactive">
            <div class="reaction-image reaction-mean1 monitor-collection "></div>
         </td>
      </tr>
      <tr data-index="1" user-score="77" class="even">
          <td data-col-span="8" data-username="jennie" class="headcol">
            <div class="headcolUsername" style="margin-left:7%;">jennie</div>
         </td>
         <td style="text-align:center;">1%</td>
         <td >A
         </td>
         <td >A
         </td>
         <td >A
         </td>
         <td >A
         </td>
         <td >A
         </td>
         <td >A
         </td>
         <td >A
         </td>
         <td data-category="interactive">
            <div class="reaction-image reaction-mean1 monitor-collection "></div>
         </td>
      </tr>
      <tr data-index="1" user-score="35" class="odd">
         <td data-col-span="8" data-username="jennie" class="headcol">
            <div class="headcolUsername" style="margin-left:7%;">jennie</div>
         </td>
         <td style="text-align:center;">1%</td>
         <td >A
         </td>
         <td >A
         </td>
         <td >A
         </td>
         <td >A
         </td>
         <td >A
         </td>
         <td >A
         </td>
         <td >A
         </td>
         <td data-category="interactive">
            <div class="reaction-image reaction-mean1 monitor-collection "></div>
         </td>
      </tr>
   </tbody>
</table>