Исправлено смещение столбцов заголовка, когда таблица шире, чем окно (только при загрузке в Twitter)

У меня есть фиксированный скрипт заголовка таблицы, который работает точно так, как мне нужно, если только таблица не шире, чем окно И на странице загружается твиттер 3 css, и я просматриваю страницу с помощью IE или Firefox.

Что такого в твиттере 3, которое могло бы изменить это поведение? Вот что у меня есть на данный момент jsfiddle

$( document ).ready(function() {
  createFixedHeader("full-table")
});

//fixed header
function createFixedHeader(full_table_id){
 var $full_table = $('#' + full_table_id);
 var $fh_table = $("#fh-" + full_table_id);
 var $header = $full_table.find("thead:first").clone();
    /* Override bootstrap's box-sizing
    $fh_table.css('width', $full_table.css('width'));
    $header.css('box-sizing', 'content-box');
    $fh_table.css('box-sizing', 'content-box');
    $fh_table.find('tr').css('box-sizing', 'content-box');
    */
    
    $fh_table.append($header);

    // $fh_table.css('tableLayout', 'fixed');
    //find each th of fixed header and set width equal to that of full table
 $fh_table.find('th').each(function(index){
     var index2 = index;
     $(this).css('width', function(index){
      return ($full_table.find("th:eq(" + index2 + ")").css('width'));
     });
 });
 $fh_table.hide();
  
 $(window).bind("scroll", function() {
  var pageOffsetTop = $(this).scrollTop();
  $('.tbl').each(function(){
      if(!$('#fh-' + $(this).attr('id')).length){
       return;
      }
   var tableOffsetTop = $(this).offset().top;
   var tableOffsetBottom = tableOffsetTop + $(this).height();
      $fixedHeader = $('#fh-' + $(this).attr('id'));
      $fixedHeader.css('width', $full_table.css('width'));
      //if the header is above the top of the window but the bottom is not
            if (pageOffsetTop >= tableOffsetTop && pageOffsetTop <= (tableOffsetBottom - $fixedHeader.height())) {
       if($fixedHeader.is(":hidden")){
        $fixedHeader.show();
       }
       //set horizontal position if there is scrolling
       $fixedHeader.offset({left: $(this).offset().left});
      }
      //if top of table is within window or the bottom of the table is above the top of the window
      else if ((pageOffsetTop <= tableOffsetTop || pageOffsetTop => (tableOffsetBottom - $fixedHeader.height())) && !$fixedHeader.is(":hidden")) {
          $fixedHeader.hide();
            }
     });
 });
}
table {border-collapse: collapse;}
td, th {border: solid 1px black;}
.fixed-header {
    position: fixed; 
    display:none;
    background: white;
    top: 0px;
    border-collapse: collapse;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<table class="tbl" id="full-table">
 <thead>
  <tr><th rowspan="2">Error Code</th><th colspan="12">Cow Identification</th><th colspan="4">Sire Identification</th><th colspan="3">Dam Identification</th><th rowspan="2">Curr Status Text</th><th rowspan="2">Curr Status Date</th><th rowspan="2">List Num</th></tr>
  <tr><th>Cntl#</th><th>Official ID</th><th>RFID</th><th>Reg</th><th>BRD</th><th>Col</th><th>Type</th><th>PStr</th><th>Birth Date</th><th>Lact Num</th><th>Barn Name</th><th>Visible Id</th><th>BRD</th><th>Sire Name</th><th>NAAB Code</th><th>Official Sire ID</th><th>BRD</th><th>Dam Name</th><th>Official Dam ID</th></tr>
 </thead>
 <tbody>
  <tr><td>D</td><td>data</td><td>longerdatacolumn</td><td>longerdatacolumn</td><td></td><td>HO</td><td></td><td></td><td>1</td><td>02-24-2007</td><td>6</td><td>data</td><td>data</td><td>HO</td><td>data</td><td>longerdata</td><td>longerdata</td><td>HO</td><td>longerdata</td><td></td><td>cow fresh</td><td>03-20-2014</td><td>5,863</td></tr>
  <tr><td>D</td><td>data</td><td>longerdatacolumn</td><td>longerdatacolumn</td><td></td><td>HO</td><td></td><td></td><td>1</td><td>05-23-2007</td><td>5</td><td>data</td><td>5897</td><td>HO</td><td>data</td><td>longerdata</td><td>longerdata</td><td>XX</td><td>longerdata</td><td></td><td>cow fresh</td><td>02-05-2014</td><td>5,897</td></tr>
  <tr><td>D</td><td>data</td><td>longerdatacolumn</td><td>longerdatacolumn</td><td></td><td>HO</td><td></td><td></td><td>1</td><td>06-06-2007</td><td>5</td><td>data</td><td>5904</td><td>HO</td><td>data</td><td>longerdata</td><td>longerdata</td><td>XX</td><td>longerdata</td><td></td><td>cow fresh</td><td>02-22-2014</td><td>5,904</td></tr>
  <tr><td>D</td><td>data</td><td>longerdatacolumn</td><td>longerdatacolumn</td><td></td><td>XX</td><td></td><td></td><td>1</td><td>07-22-2007</td><td>6</td><td>data</td><td>5918</td><td>HO</td><td>data</td><td>longerdata</td><td>longerdata</td><td>HO</td><td>longerdata</td><td></td><td>cow fresh</td><td>09-03-2014</td><td>5,918</td></tr>
  <tr><td>D</td><td>data</td><td>longerdatacolumn</td><td>longerdatacolumn</td><td></td><td>XX</td><td></td><td></td><td>1</td><td>08-01-2007</td><td>5</td><td>data</td><td>5924</td><td>XX</td><td>data</td><td>longerdata</td><td>longerdata</td><td>HO</td><td>longerdata</td><td></td><td>cow fresh</td><td>04-24-2014</td><td>5,924</td></tr>
  <tr><td>D</td><td>data</td><td>longerdatacolumn</td><td>longerdatacolumn</td><td></td><td>XX</td><td></td><td></td><td>1</td><td>08-17-2007</td><td>6</td><td>data</td><td>5934</td><td>HO</td><td>data</td><td>longerdata</td><td>longerdata</td><td>HO</td><td>longerdata</td><td></td><td>cow fresh</td><td>08-08-2014</td><td>5,934</td></tr>
  <tr><td>D</td><td>data</td><td>longerdatacolumn</td><td>longerdatacolumn</td><td></td><td>XX</td><td></td><td></td><td>1</td><td>10-29-2007</td><td>5</td><td>data</td><td>5971</td><td>XX</td><td></td><td>longerdata</td><td></td><td>HO</td><td>longerdata</td><td></td><td>cow fresh</td><td>10-28-2013</td><td>5,971</td></tr>
  <tr><td>D</td><td>data</td><td>longerdatacolumn</td><td>longerdatacolumn</td><td></td><td>XX</td><td></td><td></td><td>1</td><td>04-04-2008</td><td>5</td><td>data</td><td>6071</td><td>HO</td><td>data</td><td>longerdata</td><td>longerdata</td><td>HO</td><td>longerdata</td><td></td><td>cow fresh</td><td>09-24-2014</td><td>6,071</td></tr>
  <tr><td>D</td><td>data</td><td>longerdatacolumn</td><td>longerdatacolumn</td><td></td><td>XX</td><td></td><td></td><td>1</td><td>07-02-2008</td><td>4</td><td>data</td><td>6123</td><td>XX</td><td></td><td>longerdata</td><td></td><td>HO</td><td>longerdata</td><td>longerdata</td><td>cow fresh</td><td>01-19-2014</td><td>6,123</td></tr>
  <tr><td>D</td><td>data</td><td>longerdatacolumn</td><td>longerdatacolumn</td><td></td><td>HO</td><td></td><td></td><td>1</td><td>11-24-2011</td><td>1</td><td>data</td><td>7038</td><td>HO</td><td>data</td><td>longerdata</td><td>longerdata</td><td>HO</td><td>longerdata</td><td></td><td>heifer fresh</td><td>12-09-2013</td><td>7,038</td></tr>
  <tr><td>D</td><td>data</td><td>longerdatacolumn</td><td>longerdatacolumn</td><td></td><td>HO</td><td></td><td></td><td>1</td><td>02-16-2012</td><td>1</td><td>data</td><td>7123</td><td>HO</td><td>data</td><td>longerdata</td><td>longerdata</td><td>HO</td><td>longerdata</td><td></td><td>heifer fresh</td><td>03-27-2014</td><td>7,123</td></tr>
 </tbody>
</table>
<table id="fh-full-table" class="fixed-header">
</table>

0 ответов

Другие вопросы по тегам