【发布时间】：2015-06-07 18:03:54
【问题描述】：
此表格在水平和垂直方向滚动 使用 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 修复 Header 和前 3 列
【问题讨论】：
-
修复是什么意思？你想要它固定宽度吗？
-
修复标题：在表格中滚动时，标题仍然显示在顶部
标签： html css angularjs twitter-bootstrap