list.jsでテーブルを分割して、ソートしたい

前提・実現したいこと

以下のページを参考にして、表を作成しましたが、一番目の画像のように表が二段になり、レイアウトが崩れました。ソート機能を追加するまでは、二番目の画像のように問題なく表示させることができました。
よろしくお願いします。
参考：　https://qiita.com/kanaxx/items/6e04a0971256c839ba5a
一番目

二番目

該当のソースコード

html
1<div id="users">
2
3    <table >
4        <colgroup><col width="13.1%" span="1">
5        <col width="3%" span="1">
6        <col span="1">
7        <col width="10%" span="1">
8        <col width="5%" span="1">
9        <col width="5%" span="6">
10        <col width="6.5%" span="1">
11        <col width="16px" span="1">
12        <col width="66px" span="1">
13        </colgroup><thead>
14          <tr>
15            <th rowspan="2">科目コード</th>
16            <th rowspan="2">期間</th>
17            <th rowspan="2">科目名</th>
18            <th rowspan="2">担当者名</th>
19            <th class="sort" data-sort="name" rowspan="2">登録者数</th>
20            <th class="disabled" colspan="6">成績評価（％）</th>
21            <th rowspan="2">評点平均値</th>
22            <th rowspan="2" class="disabled">備考</th>
23            <th rowspan="2" class="disabled">&nbsp;</th>
24          </tr>
25          <tr>
26         
27            <th>A</th>
28         
29            <th>B</th>
30         
31            <th>C</th>
32         
33            <th>D</th>
34         
35            <th>F</th>
36         
37            <th>他</th>
38         
39          </tr>
40        </thead>
41        <tbody class="list">
42         
43          <tr>
44            <td rowspan="2" class="center">10407504-001</td>
45            <td rowspan="2" class="center">秋</td>
46            <td rowspan="2">ビジネスＩＣＴスキルズＩＩ</td>
47            <td rowspan="2">
48            
49             
50             小川　正史
51            </td>
52            <td rowspan="2" class="name">13</td>
53            
54             <td class="center" rowspan="2" style="background: #dcdcdc;">23.1</td>                  
55            
56             <td class="center" rowspan="2" style="">46.2</td>                  
57            
58             <td class="center" rowspan="2" style="background: #dcdcdc;">7.7</td>                  
59            
60             <td class="center" rowspan="2" style="">0.0</td>                  
61            
62             <td class="center" rowspan="2" style="background: #dcdcdc;">23.1</td>                  
63            
64             <td class="center" rowspan="2" style="">0.0</td>                  
65            
66            <td rowspan="2" class="center">2.5</td>
67            <td rowspan="2" class="center">*</td>
68            <td rowspan="1">
69            <a href="#" title="シラバス" class="syllabus" onclick="return callSyllabusInfo('https://syllabus.doshisha.ac.jp/html/2016/0407/10407504001.html');">シラバス</a>
70            </td>
71          </tr>
72          <tr>
73            <td><a href="#" title="授業講評" class="syllabus" onclick="taihiTopPosition();$('#selectedIndex').val(1);return doAction('form1','goHenkoGamen');">授業講評</a></td>
74          </tr>
75         
76          <tr>
77            <td rowspan="2" class="center">10407802-000</td>
78            <td rowspan="2" class="center">春</td>
79            <td rowspan="2">科学と技術</td>
80            <td rowspan="2">
81            
82             
83             布留川　正博
84            </td>
85            <td rowspan="2" class="name">90</td>
86            
87             <td class="center" rowspan="2" style="background: #dcdcdc;">42.2</td>                  
88            
89             <td class="center" rowspan="2" style="">36.7</td>                  
90            
91             <td class="center" rowspan="2" style="background: #dcdcdc;">4.4</td>                  
92            
93             <td class="center" rowspan="2" style="">0.0</td>                  
94            
95             <td class="center" rowspan="2" style="background: #dcdcdc;">16.7</td>                  
96            
97             <td class="center" rowspan="2" style="">0.0</td>                  
98            
99            <td rowspan="2" class="center">2.9</td>
100            <td rowspan="2" class="center">*</td>
101            <td rowspan="1">
102            <a href="#" title="シラバス" class="syllabus" onclick="return callSyllabusInfo('https://syllabus.doshisha.ac.jp/html/2016/0407/10407802000.html');">シラバス</a>
103            </td>
104          </tr>
105          <tr>
106            <td><a href="#" title="授業講評" class="syllabus" onclick="taihiTopPosition();$('#selectedIndex').val(3);return doAction('form1','goHenkoGamen');">授業講評</a></td>
107          </tr>
108         
109          <tr>
110            <td rowspan="2" class="center">10407803-000</td>
111            <td rowspan="2" class="center">春</td>
112            <td rowspan="2">企業分析１</td>
113            <td rowspan="2">
114            
115             
116             八木　匡
117            </td>
118            <td rowspan="2" class="name">241</td>
119            
120             <td class="center" rowspan="2" style="background: #dcdcdc;">16.2</td>                  
121            
122             <td class="center" rowspan="2" style="">51.5</td>                  
123            
124             <td class="center" rowspan="2" style="background: #dcdcdc;">21.2</td>                  
125            
126             <td class="center" rowspan="2" style="">2.5</td>                  
127            
128             <td class="center" rowspan="2" style="background: #dcdcdc;">8.7</td>                  
129            
130             <td class="center" rowspan="2" style="">0.0</td>                  
131            
132            <td rowspan="2" class="center">2.6</td>
133            <td rowspan="2" class="center">*</td>
134            <td rowspan="1">
135            <a href="#" title="シラバス" class="syllabus" onclick="return callSyllabusInfo('https://syllabus.doshisha.ac.jp/html/2016/0407/10407803000.html');">シラバス</a>
136            </td>
137          </tr>
138          <tr>
139            <td><a href="#" title="授業講評" class="syllabus" onclick="taihiTopPosition();$('#selectedIndex').val(4);return doAction('form1','goHenkoGamen');">授業講評</a></td>
140          </tr>
141         
142          <tr>
143            <td rowspan="2" class="center">10407804-000</td>
144            <td rowspan="2" class="center">秋</td>
145            <td rowspan="2">企業分析２</td>
146            <td rowspan="2">
147            
148             
149             八木　匡
150            </td>
151            <td rowspan="2" class="name">81</td>
152            
153             <td class="center" rowspan="2" style="background: #dcdcdc;">28.4</td>                  
154            
155             <td class="center" rowspan="2" style="">8.6</td>                  
156            
157             <td class="center" rowspan="2" style="background: #dcdcdc;">0.0</td>                  
158            
159             <td class="center" rowspan="2" style="">0.0</td>                  
160            
161             <td class="center" rowspan="2" style="background: #dcdcdc;">63.0</td>                  
162            
163             <td class="center" rowspan="2" style="">0.0</td>                  
164            
165            <td rowspan="2" class="center">1.4</td>
166            <td rowspan="2" class="center"></td>
167            <td rowspan="1">
168            <a href="#" title="シラバス" class="syllabus" onclick="return callSyllabusInfo('https://syllabus.doshisha.ac.jp/html/2016/0407/10407804000.html');">シラバス</a>
169            </td>
170          </tr>
171          <tr>
172            <td><a href="#" title="授業講評" class="syllabus" onclick="taihiTopPosition();$('#selectedIndex').val(5);return doAction('form1','goHenkoGamen');">授業講評</a></td>
173          </tr>
174         
175        </tbody>
176      </table>
177
178
179            
180    <!-- wrap list.js pagination by div.pager for using pager sample css -->
181    <div class="pager">
182        <ul class="pagination"></ul>
183    </div>
184
185  </div>
186
187  <script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
188  <script>
189  var options = {
190    valueNames: [ 'name', 'born' ],
191    page: 20,
192    pagination: {
193        paginationClass:'pagination',
194        innerWindow:1,
195        outerWindow:1,
196    }
197  };
198  var userList = new List('users', options);
199
200  userList.on('sortStart', function(a){
201      console.log(a.i);
202      a.i=1;
203    }
204  );
205
206  //for initial sort
207  userList.sort( 'name', {order : 'asc' });
208  </script>
209
210<style>
211/* style for sort */
212  .sort.desc:after {
213    content:"▼";
214  }
215  .sort.asc:after {
216    content:"▲";
217  }
218</style>
219
220<style>
221/* style for pager and pagination from http://wwx.jp/css-pagination*/
222
223.pager {
224    overflow: hidden;
225}
226
227.pager ul {
228    list-style: none;
229    position: relative;
230    left: 50%;
231    float: left;
232}
233
234.pager ul li {
235    margin: 0 1px;
236    position: relative;
237    left: -50%;
238    float: left;
239}
240
241.pager ul li span,
242.pager ul li a {
243    display: block;
244    font-size: 16px;
245    padding: 0.6em 1em;
246    border-radius: 3px;
247}
248
249.pager ul li a {
250    background: #EEE;
251    color: #000;
252    text-decoration: none;
253}
254
255.pager ul li a:hover {
256    background: #333;
257    color: #FFF;
258}
259
260/* added by myself */
261.pager ul li.active{
262    font-weight: bold;
263}
264</style>