javascript - 当它得到位置固定时缩小 tr 宽度

Question

我有一个数据表，其 cols 是根据其数据自动确定的。

但我需要将第一行固定为标题标题“为了滚动它仍然固定在顶部”。当我给它 position:fixed 时，标题行的宽度与其他行相比缩小了!!!

设置 position:fixed 之前的第一张图片: 设置 position:fixed 后:

我无法更改我的结构代码，因为类似的表太多了!!!!只能使用 css 或 javascript。

我的代码:

     <table class="list_row_container">
             <tr class="list_row_title">
               <td width="30px" align="center"><input type="checkbox" id="keyCheckbox" onclick="updateCheckboxes(this.checked)"></td>
               <td>
                   <a href="index.php?file=file&operation=list&date=asc">تاریخ ثبت</a>
               </td>
               <td>
                   <a href="index.php?file=file&operation=list&karbariId=desc">نوع کاربری   </a>
               </td>
                                <td>  
                   <a href="index.php?file=file&operation=list&addressMantaghe=desc">آدرس منطقه </a>
              </td>

              <td>
                   <a href="index.php?file=file&operation=list&zirBana=desc">زیر بنا </a>
              </td>   
              <td>
                   <a href="index.php?file=file&operation=list&tabaghe=desc">طبقه</a>
              </td>
              <td> 
                   <a href="index.php?file=file&operation=list&tedadeOtagh=desc">اتاق </a>
              </td>
              <td> 
                   <a href="index.php?file=file&operation=list&omreBana=desc">عمر </a>
              </td>                                     
              <td>           
                   <a href="index.php?file=file&operation=list&ejare=desc">اجاره</a>
             </td>                                            
             <td>
                   <a href="index.php?file=file&operation=list&priceTotal=desc">ودیعه </a>
             </td>      
             <td>&nbsp; مشاهده</td>
         </tr>
         <tr class="list_row_even" id="row492314"    >
             <td align="center"><input type="checkbox" name="info[rowIds][492314]"></td>
             <td class="list_field_container"><span class"list_field_normaltext">1394/02/29</span></td>
             <td class="list_field_container"><span class"list_field_normaltext">موقعيت اداري                          </span></td>
             <td class="list_field_container"><span class"list_field_normaltext">.بلوار فردوس غرب  پروانه شمالي  خ شقايق غربي  پ 8</span></td>
             <td class="list_field_container"><span class"list_field_normaltext">100</span></td>
             <td class="list_field_container"><span class"list_field_normaltext">2</span></td>
             <td class="list_field_container"><span class"list_field_normaltext">2</span></td>
             <td class="list_field_container"><span class"list_field_normaltext">1</span></td>
             <td class="list_field_container"><span class"list_field_normaltext"> -</span></td>
             <td class="list_field_container"><span class"list_field_normaltext">660,000,000</span></td>
             <td>
               <a id="viewmbt-492314"  style="cursor: pointer;"  title="مشاهده مشاور"><img  src="../images/search.png" alt="مشاهده" /></a>
               <a id="viewmbt2-492314"  style="cursor: pointer;"   title="مشاهده مشتری"><img  src="../images/groupIcon.png" alt="مشاهده" /></a>
             </td>
         </tr>
....

CSS 样式:

    .list_container
{
   width:100%; border:1px solid #395bc2;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
min-height:100px;
display:table;

}
.list_header
{
   width:98%; padding:1%; height:10px;
background: #c9e3fd; /* Old browsers */

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color:#000099;
line-height:10px;
font-size: 18px;
}
.list_footer_container
{
    background-color: #ffcc99;    
    font-size: 14px;
    color: black;
    padding: 10px;
}
.list_has_no_row
{
    font-family: sans-serif;
    font-size: 13px;
    color: red;
}
.list_row_container img
{
    width: 25px;
    height: 25px;
}
.fixed-header{
    position: fixed;
    top:0px;
}
.list_row_container
{
    border-top: 1px silver navy;
    width: 100%;
    text-align: center;    
}
.list_row_title
{
    background-color: #ffcc99;    
    font-size: 14px;
    color: #000099;
}
.list_row_title td{padding: 10px;}

.list_row_even
{
    background-color: #ffffff;    
    font-size: 14px;
    color: black;
}
.list_row_even:hover
{
     background-color: #ffcc99;       
}
.list_row_odd
{
    background-color: #c9e3fc;    
    font-size: 14px;
    color: black;
}
.list_row_odd:hover{
     background-color: #ffcc99;       
}
.list_field_container
{
    text-align: center;
    padding: 0px;
    margin: 0px;
}
.list_row_title {
  background-color: #9c42a0;
  color: #fff;
  position: fixed;
}

Answer 1

这是解决方案:

 $(document).ready(function(){
            /// get the td`s width automatically and set inline style width for all tds 
            $(".list_row_title td").each(function(index){
                var index2 = index;
                $(this).width(function(index2){
                    return $(".list_row_container td").eq(index).width();
                });
            });
            $(".list_row_even td").each(function(index){
                var index2 = index;
                $(this).width(function(index2){
                    return $(".list_row_container td").eq(index).width();
                });
            });
            ///if scroll make fix header tr
            var $window = $(window);

            $(window).scroll(function() {
                var scroll = $(window).scrollTop();

                if (scroll >= 250) {

                    $(".list_row_title").addClass('fixed_table_header');
                }
                else {

                    $(".list_row_title").removeClass('fixed_table_header');
                }
            });
        });

风格:

.fixed_table_header
{
    position: fixed;
    top:0;
}