HTML-таблица с фиксированным заголовком с максимальной шириной столбцов и заполнением с использованием jQuery

Question

У меня есть таблица HTML с заголовком, который я блокирую в верхней части моего браузера с помощью jQuery, когда пользователь прокручивается мимо него. Я видел много решений этой конкретной проблемы на SO и в других местах, но не могу пройти мимо контрольно-пропускного пункта, который я ударил.

Я был в состоянии получить мой JQuery, чтобы зафиксировать штраф заголовка (У меня есть < тр> в моих < THEAD> содержащих мои заголовки столбцов, и я дал, что < тр> ИД «theadTrId») ,

$(document).ready(function() { 
    var widths = new Array(); 

    //create array of <th> widths 
    var i = 0; 
    $('th').each(function() { 
     widths[i] = $(this).width(); 
     i++; 
    }); 

    var elementPosTop = $('#theadTrId').offset().top; 
    $(window).scroll(function() { 
     SetWidths(); 
    }); 

    var SetWidths = function() { 
     var wintop = $(window).scrollTop(); 

     if (wintop > elementPosTop) { 
      $('#theadTrId').css({ "position": "fixed", "top": "0" }); 

      //<th> and <td> widths in 1st column 
      $('#th1').width(widths[0]); 
      $('#td1').width(widths[0]); 

      //<th> and <td> widths in 2nd column 
      $('#th2').width(widths[1]); 
      $('#td2').width(widths[1]); 

      //x number of other columns with same logic... 
     } else { 
      $('#theadTrId').css({ "position": "inherit" }); 
     } 
    }; 
}); 

Это прекрасно работает и блокирует заголовок в верхней части окна при прокрутке вниз и помещает его обратно по умолчанию при прокрутке назад, но для жизни меня я не могу получить <-е> и < тд > ширина столбцов выстраиваться при добавлении следующего CSS:

td { 
    max-width: 200px; 
} 
td, th { 
    padding: 10px; 
} 

Должен ли я удалить этот стиль, все заголовки и колонки выстраиваются отлично. Этот стиль требуется и не может быть удален. Ширина таблицы также должна быть установлена ​​на уровне 100%. Какие-либо предложения?

jsFiddle здесь (вы можете увидеть желаемое поведение, если вы удалите последние 2 свойства CSS, проблема наиболее ярко выражена в Firefox): http://jsfiddle.net/aKe6j/59/

Answer 1

Попробуйте это (the fiddle), я думаю, что это может быть решение:

<style> 
    table { 
     width: 100%; 
    } 
    td { 
     background-color: #BCE6E6;  
    } 
    #theadTrId { 
     background-color: #6699FF; 
    } 
    #th1 { 
     width: 110px; 
    } 
    #th2 { 
     width: 235px; 
    } 
    #th3 { 
     width: 80px; 
    } 
    td { 
     max-width: 200px; 
    } 
    td, th { 
     padding: 10px; 
    } 

    </style> 
    </head> 
    <table border="1"> 
     <thead> 
      <tr id="theadTrId"> 
       <th id="th1">Column 1</th> 
       <th id="th2">Column 2</th> 
       <th id="th3">Column 3</th> 
      </tr> 
     </thead> 

     <tbody id="tbody"> 

     </tbody> 
    </table> 
    <script> 
    //loop to add 40 rows 
for (var i=0;i < 41; i++) 
{ 
    var jj = 1; 
    $("#tbody").append("<tr><td id='td"+(jj++)+"'>Content " + i + "</td><td id='td"+(jj++)+"'>Content " + i + "</td><td id='td"+(jj++)+"'>Content " + i + "</td></tr>") 
} 

var widths = new Array(); 
//create array of <th> widths 
var i = 0; 
$('th').each(function() { 
    widths[i] = $(this).context.offsetWidth; 

    i++; 
}); 

var elementPosTop = $('#theadTrId').offset().top; 
$(window).scroll(function() { 
    SetWidths(); 
}); 

var SetWidths = function() { 
     var wintop = $(window).scrollTop(); 

     if (wintop > elementPosTop) { 
      $('#theadTrId').css({ "position": "fixed", "top": "0" }); 
      //use the css rulz to change also the max-width for that particular td 
      //it can be rolled back afther 
      //<th> and <td> widths in 1st column 
      $('#th1').css('width',widths[0]); 
      $('#td1').css('width',widths[0]); 
      $('#td1').css('max-width',widths[0]); 
      //<th> and <td> widths in 2nd column 
      $('#th2').css('width',widths[1]); 
      $('#td2').css('width',widths[1]); 
      $('#td2').css('max-width',widths[1]); 
      //<th> and <td> widths in 3rd column 
      $('#th3').css('width',widths[2]); 
      $('#td3').css('width',widths[2]); 
      $('#td3').css('max-width',widths[2]); 

     } else { 
      $('#theadTrId').css({ "position": "inherit" }); 
      // if you need the max-width again 
      $('#td0').css('max-width',200); 
      $('#td1').css('max-width',200); 
      $('#td2').css('max-width',200); 
     } 
    }; 
    </script>