此表在水平和垂直方向上滚动 使用colspan和rowspan
如何修复标题和前3列
我使用Anglarjs填充此表并在单击按钮
后创建它JSFiddle：Sample Show
<table ng-show="pageState == 2"id="reportTable">
<thead>
<tr>
<th rowspan="3">ردیف</th>
<th rowspan="3">سازمان های طرف قرارداد/منابع وصول درآمد</th>
<th colspan="6">گردش عملیات سال ۱۳۸۹</th>
<th colspan="9">گردش عملیات سال ۱۳۹۰</th>
<th rowspan="3">كل مطالبات (مانده ماه جاري+مانده سنواتي)
</th>
</tr>
<tr>
<th rowspan="2">مانده مطالبات سال ۱۳۸۹ قبل</th>
<th rowspan="2">تفاوت تعرفه ارسالي سال ۱۳۸۹</th>
<th rowspan="2">وصولی بابت سال ۱۳۸۹ در سال ۱۳۹۰</th>
<th rowspan="2">وصولي بابت تعرفه سال ۱۳۸۹ در سال ۱۳۹۰</th>
<th rowspan="2">کسورات ۱۳۸۹</th>
<th rowspan="2">مانده سنواتی</th>
<th rowspan="2">مانده مطالبات سال ۱۳۹۰ انتقال از ماه قبل</th>
<th colspan="3">ارسالي (اسناد +تفاوت تعرفه) ماه جاري</th>
<th colspan="3">وصولي مربوط به سال ۱۳۹۰</th>
<th rowspan="2">کسورات قطعی</th>
<th rowspan="2">مانده ماه جاری</th>
</tr>
<tr>
<th>دارو</th>
<th>درمان</th>
<th>کلی</th>
<th>دارو</th>
<th>درمان</th>
<th>کلی</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="sg in report">
<td style="text-align: right;" colspan="18">
<ul style="margin-bottom: 0px;">
<li >سازمانهای بیمه گر پايه و ذغالسنگ</li></ul>
</td>
</tr>
<tr ng-repeat="r in sg.overlayReports" ng-repeat-end="">
<td class="ng-binding">۱</td>
<td ng-bind="r.sourceName">کمیته امداد</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۵۱٬۰۰۰٬۰۰۰</td>
<td class="ng-binding">‎۲٬۱۱۰٬۰۰۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۵۱٬۰۰۰٬۰۰۰</td>
<td class="ng-binding">‎۱٬۹۹۹٬۰۰۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۱۰۰٬۰۰۰</td>
<td class="ng-binding">‎۱۱٬۰۰۰</td>
<td class="ng-binding">‎۱۱٬۰۰۰</td>
</tr>
<tr ng-repeat="r in sg.overlayReports" ng-repeat-end="">
<td class="ng-binding">۲</td>
<td ng-bind="r.sourceName">بازنشستگان فولاد</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
</tr>
<tr ng-repeat="r in sg.overlayReports" ng-repeat-end="">
<td class="ng-binding">۳</td>
<td ng-bind="r.sourceName">بیمه سلامت</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
</tr>
<tr ng-repeat="r in sg.overlayReports" ng-repeat-end="">
<td class="ng-binding">۴</td>
<td ng-bind="r.sourceName">تامین اجتماعی</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
</tr>
<tr ng-repeat="r in sg.overlayReports" ng-repeat-end="">
<td class="ng-binding">۵</td>
<td ng-bind="r.sourceName">نیروهای مسلح</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
</tr>
<tr ng-repeat="r in sg.overlayReports" ng-repeat-end="">
<td class="ng-binding">۶</td>
<td ng-bind="r.sourceName" class="ng-binding">ذغالسنگ(شاغل)</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
</tr>
<tr ng-repeat-start="sg in report" class="ng-scope">
<td style="text-align: right;" colspan="18">
<ul><li>بانکهای طرف قرارداد</li></ul>
</td>
</tr>
<tr ng-repeat="r in sg.overlayReports" ng-repeat-end="">
<td class="ng-binding">۷</td>
<td ng-bind="r.sourceName" class="ng-binding">بانک ملی</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۵۰٬۰۰۰٬۰۰۰</td>
<td class="ng-binding">‎۶۶٬۵۱۰٬۰۰۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۱۱۶٬۵۱۰٬۰۰۰</td>
<td class="ng-binding">‎۱۱۶٬۵۱۰٬۰۰۰</td>
</tr>
<tr ng-repeat-start="sg in report" class="ng-scope">
<td style="text-align: right;" colspan="18">
<ul style="margin-bottom: 0px;">
<li>سایر سازمانها و شرکت های طرف قرارداد</li></ul>
</td>
</tr>
<tr ng-repeat="r in sg.overlayReports" ng-repeat-end="">
<td class="ng-binding">۸</td>
<td ng-bind="r.sourceName" class="ng-binding">هلال احمر</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
</tr><tr ng-repeat-start="sg in report" class="ng-scope">
<td style="text-align: right;" colspan="18">
<ul style="margin-bottom: 0px;">
<li >بیمه های تکمیلی طرف قرارداد</li></ul>
</td>
</tr>
<tr ng-repeat="r in sg.overlayReports" ng-repeat-end="">
<td class="ng-binding">۹</td>
<td ng-bind="r.sourceName">بیمارستان 579 ارتش</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
</tr><!-- end ngRepeat: r in sg.overlayReports --><tr ng-repeat="r in sg.overlayReports" ng-repeat-end="" class="ng-scope">
<td class="ng-binding">۱۰</td>
<td ng-bind="r.sourceName">آتیه سازان حافظ</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
</tr><tr ng-repeat-start="sg in report" class="ng-scope">
<td style="text-align: right;" colspan="18">
<ul style="margin-bottom: 0px;"><li>دانشگاه</li></ul>
</td>
</tr>
<tr ng-repeat="r in sg.overlayReports" ng-repeat-end="">
<td class="ng-binding">۱۱</td>
<td ng-bind="r.sourceName">یارانه و طرح تحول نظام سلامت</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
</tr><tr ng-repeat="r in sg.overlayReports" ng-repeat-end="">
<td class="ng-binding">۱۲</td>
<td ng-bind="r.sourceName">حوادث ترافیکی</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
</tr><tr ng-repeat-start="sg in report" class="ng-scope">
<td style="text-align: right;" colspan="18">
<ul style="margin-bottom: 0px;"><li></li></ul>
</td>
</tr>
<tr ng-repeat-start="sg in report">
<td style="text-align: right;" colspan="18">
<ul style="margin-bottom: 0px;">
<li class="ng- binding">از طریق نقدی </li></ul>
</td>
</tr>
<tr ng-repeat="r in sg.overlayReports" ng-repeat-end="">
<td class="ng-binding">۱۳</td>
<td ng-bind="r.sourceName" class="ng-binding">نقدی)</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
</tr><tr ng-repeat-start="sg in report" class="ng-scope">
<td style="text-align: right;" colspan="18">
<ul style="margin-bottom: 0px;">
<li class="ng-binding">ییی</li></ul>
</td>
</tr>
<tr ng-repeat="r in sg.overlayReports" ng-repeat-end="">
<td class="ng-binding">۱۴</td>
<td ng-bind="r.sourceName" class="ng-binding">یی</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
<td class="ng-binding">‎۰</td>
</tr>
<tr ng-repeat-start="sg in report" class="ng-scope">
<td style="text-align: right;" colspan="18">
<ul style="margin-bottom: 0px;">
<li class="<ng-></ng->binding"></li></ul>
</td>
</tr>
</tbody>
</table>
我想从Rigth修复标题和前3列
答案 0 :(得分：0)
将要修复的任何元素添加为shouldBeFixed，并在样式表（CSS）中使用此代码：
#shouldBeFixed{
position: fixed;
}
答案 1 :(得分：0)
修复标题并不容易。 见这个解决方案
http://www.imaputz.com/cssStuff/bigFourVersion.html
但是因为你正在使用col-span和row-span而预计会出现问题。 你必须调整它才能为你工作并在所有浏览器上进行全面测试。