保持两个可滚动表的表宽度相同，并保持标题保持不变

Question

我在表（table1）中有一个表（table2）。 table1里面的div“outer”和table2里面的div“inner”。 我想为div“outer”启用scroll-x并为div“inner”启用scroll-y，所以当table1垂直滚动时，标题将保持不变。我做了它并得到了我想要的东西，但即使我在一个类中设置它（使用CSS）或在td中设置宽度，也无法设置table2的列宽。我也尝试使用colgroup但仍然相同。我也尝试使用一个表（table1和table2）与不同的div，但标题表不能保持放置，即使它可以但宽度不能设置为我想要的。我试过的所有方法只是给我这个问题，标题不能保持不变或宽度大小无法设置。

my table now

table2的列宽如何与table1相同？

这是我的代码

<div class="outernew">
    <table style="width:1250px; margin-left:10px; margin-right:10px;" cellspacing=1>
    <thead>
        <tr bgcolor="#EAEAE9">
            <th height="60" rowspan="4" bgcolor="#EAEAE9" align="center" class="defaultboldorange col1">No</th>
            <th rowspan="4" bgcolor="#EAEAE9" align="center" class="defaultboldorange col2">Area</th>
            <th rowspan="4" bgcolor="#EAEAE9" align="center" class="defaultboldorange col3">Site Name</th>
            <th rowspan="4" bgcolor="#EAEAE9" align="center" class="defaultboldorange col4">Alamat</th>
            <th rowspan="4" bgcolor="#EAEAE9" align="center" class="defaultboldorange col5">Antenna</th>
            <th rowspan="4" bgcolor="#EAEAE9" align="center" class="defaultboldorange col6">TSI</th>
            <th rowspan="3" colspan="2" bgcolor="#EAEAE9" align="center" class="defaultboldorange col7head">Periode</th>

        <?
            $jml_asr = $db->query("select ...");
            for($a=0; $a<count($jml_asr); $a++){
        ?>

            <th height="30" colspan="42" bgcolor="#EAEAE9" align="center" class="defaultboldorange col8head"><? echo $jml_asr[$a]['assurance_name']; ?></th>
            <th bgcolor="ffffff" class="col9"></th>

        <?
            }
        ?>

        </tr>

        <tr>

        <?
            for($a=0; $a<count($jml_asr); $a++){
        ?>

            <th colspan="6" bgcolor="#EAEAE9" align="center" class="defaultboldorange">Flexas</th>
            <th colspan="6" bgcolor="#EAEAE9" align="center" class="defaultboldorange">RSMDCC</th>
            <th colspan="6" bgcolor="#EAEAE9" align="center" class="defaultboldorange">Others</th>
            <th colspan="6" bgcolor="#EAEAE9" align="center" class="defaultboldorange">TSFWD</th>
            <th colspan="6" bgcolor="#EAEAE9" align="center" class="defaultboldorange">All Risk</th>
            <th colspan="6" bgcolor="#EAEAE9" align="center" class="defaultboldorange">EQVET</th>
            <th colspan="6" bgcolor="#EAEAE9" align="center" class="defaultboldorange">Total AR + EQVET</th>
            <th width="5" bgcolor="ffffff"></th>

        <?
            }
        ?>

        </tr>

        <tr bgcolor="#EAEAE9">

        <?
            for($a=0; $a<count($jml_asr); $a++){
                for($r=0; $r<7; $r++){
        ?>

            <th colspan="2" bgcolor="#EAEAE9" align="center" class="defaultboldorange">Rate</th>
            <th colspan="2" bgcolor="#EAEAE9" align="center" class="defaultboldorange">Discount</th>
            <th colspan="2" bgcolor="#EAEAE9" align="center" class="defaultboldorange">Result</th>

        <?      } ?>

            <th bgcolor="ffffff"></th>

        <?  }
        ?>

        </tr>

        <tr bgcolor="#EAEAE9">
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange">Start</th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange">End</th>

        <?
            for($a=0; $a<count($jml_asr); $a++){
                for($s=0; $s<21; $s++){
        ?>

            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange">%</th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange">IDR</th>

        <?      } ?>

            <th bgcolor="ffffff"></th>

        <?  }
        ?>

        </tr>

        <tr>

        <?
            $sum = $db->query("select ... ");

        ?>

            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange">&Sigma;</th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"><? echo $sum[0]['total']; ?></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"><? echo $sum[0]['sum_antenna'] ?></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"><? echo strstr($sum_tsi, ',', true); ?></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"></th>

        <?
            for($a=0; $a<count($jml_asr); $a++){

                $sum_avg = $db->query("select ... ");

        ?>

            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"><? echo number_format($sum_avg[0]['avg_flexas'], 3, ',', '.')."%"; ?></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"><? echo strstr($sum_flexas_idr, ',', true); ?></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"><? echo number_format($sum_avg[0]['avg_flexasafter'], 3, ',', '.')."%"; ?></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"><? echo strstr($sum_flexasafter_idr, ',', true); ?></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"><? echo number_format($sum_avg[0]['avg_rsmdcc'], 3, ',', '.')."%"; ?></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"><? echo strstr($sum_rsmdcc_idr, ',', true); ?></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"><? echo number_format($sum_avg[0]['avg_rsmdccafter'], 3, ',', '.')."%"; ?></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"><? echo strstr($sum_rsmdccafter_idr, ',', true); ?></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"><? echo number_format($sum_avg[0]['avg_others'], 3, ',', '.')."%"; ?></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"><? echo strstr($sum_others_idr, ',', true); ?></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"><? echo number_format($sum_avg[0]['avg_othersafter'], 3, ',', '.')."%"; ?></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"><? echo strstr($sum_othersafter_idr, ',', true); ?></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"><? echo number_format($sum_avg[0]['avg_tsfwd'], 3, ',', '.')."%"; ?></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"><? echo strstr($sum_tsfwd_idr, ',', true); ?></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"><? echo number_format($sum_avg[0]['avg_tsfwdafter'], 3, ',', '.')."%"; ?></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"><? echo strstr($sum_tsfwdafter_idr, ',', true); ?></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"><? echo number_format($sum_avg[0]['avg_allrisk'], 3, ',', '.')."%"; ?></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"><? echo strstr($sum_allrisk_idr, ',', true); ?></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"><? echo number_format($sum_avg[0]['avg_allriskafter'], 3, ',', '.')."%"; ?></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"><? echo strstr($sum_allriskafter_idr, ',', true); ?></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"><? echo number_format($sum_avg[0]['avg_eqvet'], 3, ',', '.')."%"; ?></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"><? echo strstr($sum_eqvet_idr, ',', true); ?></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"><? echo number_format($sum_avg[0]['avg_eqvetafter'], 3, ',', '.')."%"; ?></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"><? echo strstr($sum_eqvetafter_idr, ',', true); ?></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"><? echo number_format($sum_avg[0]['avg_premi'], 3, ',', '.')."%"; ?></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"><? echo strstr($sum_premi_idr, ',', true); ?></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"><? echo number_format($sum_avg[0]['avg_premiafter'], 3, ',', '.')."%"; ?></th>
            <th bgcolor="#EAEAE9" align="center" class="defaultboldorange"><? echo strstr($sum_premiafter_idr, ',', true); ?></th>

            <th bgcolor="ffffff"></th>
        <?
            }
        ?>

        </tr>
    </thead>

    <tbody>
    <tr><td colspan="<? echo (8+(43*count($jml_asr)));?>" >
    <div class="innernew">
    <table style="width:100%; height:100px;" cellspacing=1>
      <?
        $number=1;
        for ($count_all_data=0; $count_all_data<count($get_all_data); $count_all_data++){                  
      ?>    

        <tr bgcolor="#E9F3F1">
            <td class="Default col1" align="center" height="20"><? echo $number; ?></td>
            <td class="Default col2" align="center"><? echo $get_all_data[$count_all_data]['city_name']; ?></td>
            <td class="Default col3" align="left"><? echo $get_all_data[$count_all_data]['site_name']; ?></td>
            <td class="Default col4" align="center" style="white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"><? echo $get_all_data[$count_all_data]['site_address']; ?></td>
            <td class="Default col5" align="center"><? echo $get_all_data[$count_all_data]['antenna']; ?></td>
            <td class="Default col6" align="center"><? echo strstr(number_format(($get_all_data[$count_all_data]['TSI']/1000000), 3, ',', '.'), ',', true); ?></td>
            <td class="Default col7" align="center"><? echo date('j M y', strtotime($get_all_data[$count_all_data]['date_start'])); ?></td>
            <td class="Default col7" align="center"><? echo date('j M y', strtotime($get_all_data[$count_all_data]['date_end'])); ?></td>

        <?
            for($a=0; $a<count($jml_asr); $a++){
            $get_data = $db->query("select ... ");

        ?>

            <td class="Default col8" align="center"><? echo number_format($get_data[0]['flexas'], 5, ',', '.')."%"; ?></td>
            <td class="Default col8" align="center"><? echo strstr(number_format(($get_data[0]['flexas_idr']/1000), 3, ',', '.'), ',', true); ?></td>
            <td class="Default col8" align="center"><? echo number_format($get_data[0]['flexas_diskon'], 5, ',', '.')."%"; ?></td>
            <td class="Default col8" align="center"><? echo strstr(number_format(($get_data[0]['flexasdiskon_idr']/1000), 3, ',', '.'), ',', true); ?></td>
            <td class="Default col8" align="center"><? echo number_format($get_data[0]['flexas_afterdiskon'], 5, ',', '.')."%"; ?></td>
            <td class="Default col8" align="center"><? echo strstr(number_format(($get_data[0]['flexasafter_idr']/1000), 3, ',', '.'), ',', true); ?></td>

            <td class="Default col8" align="center"><? echo number_format($get_data[0]['rsmdcc'], 5, ',', '.')."%"; ?></td>
            <td class="Default col8" align="center"><? echo strstr(number_format(($get_data[0]['rsmdcc_idr']/1000), 3, ',', '.'), ',', true); ?></td>
            <td class="Default col8" align="center"><? echo number_format($get_data[0]['rsmdcc_diskon'], 5, ',', '.')."%"; ?></td>
            <td class="Default col8" align="center"><? echo strstr(number_format(($get_data[0]['rsmdccdiskon_idr']/1000), 3, ',', '.'), ',', true); ?></td>
            <td class="Default col8" align="center"><? echo number_format($get_data[0]['rsmdcc_afterdiskon'], 5, ',', '.')."%"; ?></td>
            <td class="Default col8" align="center"><? echo strstr(number_format(($get_data[0]['rsmdccafter_idr']/1000), 3, ',', '.'), ',', true); ?></td>

            <td class="Default col8" align="center"><? echo number_format($get_data[0]['others'], 5, ',', '.')."%"; ?></td>
            <td class="Default col8" align="center"><? echo strstr(number_format(($get_data[0]['others_idr']/1000), 3, ',', '.'), ',', true); ?></td>
            <td class="Default col8" align="center"><? echo number_format($get_data[0]['others_diskon'], 5, ',', '.')."%"; ?></td>
            <td class="Default col8" align="center"><? echo strstr(number_format(($get_data[0]['othersdiskon_idr']/1000), 3, ',', '.'), ',', true); ?></td>
            <td class="Default col8" align="center"><? echo number_format($get_data[0]['others_afterdiskon'], 5, ',', '.')."%"; ?></td>
            <td class="Default col8" align="center"><? echo strstr(number_format(($get_data[0]['othersafter_idr']/1000), 3, ',', '.'), ',', true); ?></td>

            <td class="Default col8" align="center"><? echo number_format($get_data[0]['tsfwd'], 5, ',', '.')."%"; ?></td>
            <td class="Default col8" align="center"><? echo strstr(number_format(($get_data[0]['tsfwd_idr']/1000), 3, ',', '.'), ',', true); ?></td>
            <td class="Default col8" align="center"><? echo number_format($get_data[0]['tsfwd_diskon'], 5, ',', '.')."%"; ?></td>
            <td class="Default col8" align="center"><? echo strstr(number_format(($get_data[0]['tsfwddiskon_idr']/1000), 3, ',', '.'), ',', true); ?></td>
            <td class="Default col8" align="center"><? echo number_format($get_data[0]['tsfwd_afterdiskon'], 5, ',', '.')."%"; ?></td>
            <td class="Default col8" align="center"><? echo strstr(number_format(($get_data[0]['tsfwdafter_idr']/1000), 3, ',', '.'), ',', true); ?></td>

            <td class="Default col8" align="center"><? echo number_format($get_data[0]['allrisk'], 5, ',', '.')."%"; ?></td>
            <td class="Default col8" align="center"><? echo strstr(number_format(($get_data[0]['allrisk_idr']/1000), 3, ',', '.'), ',', true); ?></td>
            <td class="Default col8" align="center"><? echo number_format($get_data[0]['allrisk_diskon'], 5, ',', '.')."%"; ?></td>
            <td class="Default col8" align="center"><? echo strstr(number_format(($get_data[0]['allriskdiskon_idr']/1000), 3, ',', '.'), ',', true); ?></td>
            <td class="Default col8" align="center"><? echo number_format($get_data[0]['allrisk_afterdiskon'], 5, ',', '.')."%"; ?></td>
            <td class="Default col8" align="center"><? echo strstr(number_format(($get_data[0]['allriskafter_idr']/1000), 3, ',', '.'), ',', true); ?></td>

            <td class="Default col8" align="center"><? echo number_format($get_data[0]['eqvet'], 5, ',', '.')."%"; ?></td>
            <td class="Default col8" align="center"><? echo strstr(number_format(($get_data[0]['eqvet_idr']/1000), 3, ',', '.'), ',', true); ?></td>
            <td class="Default col8" align="center"><? echo number_format($get_data[0]['eqvet_diskon'], 5, ',', '.')."%"; ?></td>
            <td class="Default col8" align="center"><? echo strstr(number_format(($get_data[0]['eqvetdiskon_idr']/1000), 3, ',', '.'), ',', true); ?></td>
            <td class="Default col8" align="center"><? echo number_format($get_data[0]['eqvet_afterdiskon'], 5, ',', '.')."%"; ?></td>
            <td class="Default col8" align="center"><? echo strstr(number_format(($get_data[0]['eqvetafter_idr']/1000), 3, ',', '.'), ',', true); ?></td>

            <td class="Default col8" align="center"><? echo number_format($get_data[0]['premi'], 5, ',', '.')."%"; ?></td>
            <td class="Default col8" align="center"><? echo strstr(number_format(($get_data[0]['premi_idr']/1000), 3, ',', '.'), ',', true); ?></td>
            <td class="Default col8" align="center"><? echo number_format($get_data[0]['premi_diskon'], 5, ',', '.')."%"; ?></td>
            <td class="Default col8" align="center"><? echo strstr(number_format(($get_data[0]['premidiskon_idr']/1000), 3, ',', '.'), ',', true); ?></td>
            <td class="Default col8" align="center"><? echo number_format($get_data[0]['premi_afterdiskon'], 5, ',', '.')."%"; ?></td>
            <td class="Default col8" align="center"><? echo strstr(number_format(($get_data[0]['premiafter_idr']/1000), 3, ',', '.'), ',', true); ?></td>

            <td class="col9" bgcolor="ffffff"></td>
        <?
            }
        ?>

        </tr>

        <? $number+=1; } ?>
        <tr><td>&nbsp;</td></tr>
        </table>
        </div>
    </td></tr>
    </tbody>
    </table>
</div>

这是我的CSS

 .defaultboldorange {
  font-family : Arial, Helvetica, sans-serif;
  font-size : 12px;
  font-weight : bold;
  line-height: 13px;
  color : #e84e0f;
}
.default {
  font-family : Arial, Helvetica, sans-serif;
  font-size : 12px;
  font-weight : normal;
  line-height: 13px;
  color : #666666;
}
.col1 { width:40px; }
.col2 { width:60px; }
.col3 { width:300px; }
.col4 { width:150px; }
.col5 { width:50px; }
.col6 { width:50px; }
.col7head { width:120px; }
.col7 { width:58px; }
.col8head { 
    width:2436px;
    /*width:2700px;*/ 
    }
.col8 { width:58px; }
.col9 { width:5px; }

.outernew { 
    width:1250px;
    overflow-x:scroll;
    overflow-y:hidden;
    height:300px;
}
.innernew {
    overflow-y:scroll;
    overflow-x:hidden;
    height:200px;
}

我没有为.innernew设置宽度，因为它会是这样的 table

有什么想法吗？谢谢。它会对我有所帮助..