我有以下代码用于冻结顶部的标题：
var div = $('#header1');
var start = $("#header1").offset().top;
$.event.add(window, "scroll", function() {
var p = $(window).scrollTop();
$("#header1").css('position',((p)>start) ? 'fixed' : 'static');
$("#header1").css('top',((p)>start) ? '0px' : '');
});
其中header1是thead的ID，但是当标题在滚动时开始冻结时，其宽度会更改，而且表格的第一列也会更改
HTML code：
<table id="mytable" summary="Contains" class="table-stripes timetable-stops-table">
<thead id="header1" width="100%">
<tr scope="colgroup" colspan="1">
<th>1<a class="js-toggle-all-stops">+ show all stops</a></th>
<th >2<span class="visuallyhidden">Depart</span></th>
<th>3<span class="visuallyhidden">Depart</span>th>
<th >4<span class="visuallyhidden">Depart</span></th>
<th >5<span class="visuallyhidden">Depart</span>th>
<th >6<span class="visuallyhidden">Depart</span></th>
<th >7<span class="visuallyhidden">Depart</span></th>
<th >8<span class="visuallyhidden">Depart</span>
<span class="alert-icon"><img src="inverted.png" alt="Alert message" class="js-alert-icon"><span class="alert-icon message js-alert"><span class="indicator"></span>Delays</span></span>
</th>
<th >9<span class="visuallyhidden">Depart</span></th>
<th >10<span class="visuallyhidden">Depart</span></th>
<th >11<span class="visuallyhidden">Depart</span></th>
<th >12<span class="visuallyhidden">Depart</span></th>
<th >13<span class="visuallyhidden">Depart</span></th>
<th >14<span class="visuallyhidden">Depart</span></th>
<th >15<span class="visuallyhidden">Depart</span></th>
<th >16<span class="visuallyhidden">Depart</span></th>
<th >17<span class="visuallyhidden">Depart</span></th>
<th >18<span class="visuallyhidden">Depart</span></th>
<th >19<span class="visuallyhidden">Depart</span></th>
<th >20<span class="visuallyhidden">Depart</span></th>
<th >21<span class="visuallyhidden">Depart</span></th>
<th >22<span class="visuallyhidden">Depart</span></th>
<th >23<span class="visuallyhidden">Depart</span></th>
<th >24<span class="visuallyhidden">Depart</span></th>
<th >25<span class="visuallyhidden">Depart</span></th>
<th >26<span class="visuallyhidden">Depart</span></th>
<th >27<span class="visuallyhidden">Depart</span></th>
<th >28<span class="visuallyhidden">Depart</span></th>
<th >29<span class="visuallyhidden">Depart</span></th>
</tr>
</thead>
<tbody class="stop-odd">
<tr class="stop stop-major stop-major-odd js-stop-major">
<th>
<span class="stop-name">Ocean Road</span>,
<span class="stop-loc">Beach</span>
<div class="stop-wrap">
<span class="stop-no">Stop no<br><a href="#">210825</a></span>
<span class="stop-expand"><a href="javascript:void(0);" class="js-toggle-stops">+ 1 stop</a></span>
</div>
</th>
<td>…</td>
<td>…</td>
<td>…</td>
<td>…</td>
<td>11:05 <span class="alert-icon"><img src="icon-alert.png" alt="Alert message" class="js-alert-icon"><span class="alert-icon message js-alert"><span class="indicator"></span>Delays</span></span></td>
<td>…</td>
<td>11:07</td>
<td>11:09</td>
<td>11:12</td>
<td>11:35</td>
<td>11:47</td>
<td class="next-day">00:05</td>
<td class="next-day">00:07 <span class="alert-icon"><img src="alert.png" alt="Alert message" class="js-alert-icon"><span class="alert-icon message js-alert"><span class="indicator"></span>Delays</span></span></td>
<td>…</td>
<td>06:09</td>
<td>11:12</td>
<td>11:35</td>
<td>11:47</td>
<td>11:07</td>
<td>11:09</td>
<td>11:12</td>
<td>11:35</td>
<td>11:47</td>
<td>11:07</td>
<td>11:09</td>
<td>11:12</td>
<td>06:35</td>
<td>11:47</td>
</tr>
<tbody>
</table>