當它獲得位置修復時收縮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; 
}