HTML 큰 테이블 틀 고정

1 개요

HTML 큰 테이블 틀 고정

• CSS border-collapse를 separate로 변경하여 컬럼 폭 안맞는 문제를 해결
• 페이지를 넘는 큰 표에도 대응 (좌우스크롤 가능)

<style>
table { border-collapse: collapse; }
th { background: #cdefff; height: 32px; }
th, td { border: 1px solid silver; padding:5px; }
</style>

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(function () {
  $('table.floating-thead').each(function() {
    if( $(this).css('border-collapse') == 'collapse') {
      $(this).css('border-collapse','separate').css('border-spacing',0);
    }
    $(this).prepend( $(this).find('thead:first').clone().hide().css('top',0).css('position','fixed') );
  });
  
  $(window).scroll(function() {
    var scrollTop = $(window).scrollTop(),
      scrollLeft = $(window).scrollLeft();
    $('table.floating-thead').each(function(i) {
      var thead = $(this).find('thead:last'),
        clone = $(this).find('thead:first'),
        top = $(this).offset().top,
        bottom = top + $(this).height() - thead.height();

      if( scrollTop < top || scrollTop > bottom ) {
        clone.hide();
        return true;
      }
      if( clone.is('visible') ) return true;
      clone.find('th').each(function(i) {
        $(this).width( thead.find('th').eq(i).width() );
      });
      clone.css("margin-left", -scrollLeft ).width( thead.width() ).show();
    });
  });
});
</script>

<h1>표 1</h1>
<table class='floating-thead'>
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th><th>F</th><th>G</th><th>H</th><th>I</th><th>J</th><th>K</th><th>L</th><th>M</th><th>N</th><th>O</th><th>P</th><th>Q</th><th>R</th><th>S</th><th>T</th><th>U</th></tr></thead>
<tbody>
  <tr><td>HelloA1</td><td>HelloB1</td><td>HelloC1</td><td>HelloD1</td><td>HelloE1</td><td>HelloF1</td><td>HelloG1</td><td>HelloH1</td><td>HelloI1</td><td>HelloJ1</td><td>HelloK1</td><td>HelloL1</td><td>HelloM1</td><td>HelloN1</td><td>HelloO1</td><td>HelloP1</td><td>HelloQ1</td><td>HelloR1</td><td>HelloS1</td><td>HelloT1</td><td>HelloU1</td></tr>
  <tr><td>HelloA2</td><td>HelloB2</td><td>HelloC2</td><td>HelloD2</td><td>HelloE2</td><td>HelloF2</td><td>HelloG2</td><td>HelloH2</td><td>HelloI2</td><td>HelloJ2</td><td>HelloK2</td><td>HelloL2</td><td>HelloM2</td><td>HelloN2</td><td>HelloO2</td><td>HelloP2</td><td>HelloQ2</td><td>HelloR2</td><td>HelloS2</td><td>HelloT2</td><td>HelloU2</td></tr>
  <tr><td>HelloA3</td><td>HelloB3</td><td>HelloC3</td><td>HelloD3</td><td>HelloE3</td><td>HelloF3</td><td>HelloG3</td><td>HelloH3</td><td>HelloI3</td><td>HelloJ3</td><td>HelloK3</td><td>HelloL3</td><td>HelloM3</td><td>HelloN3</td><td>HelloO3</td><td>HelloP3</td><td>HelloQ3</td><td>HelloR3</td><td>HelloS3</td><td>HelloT3</td><td>HelloU3</td></tr>
  <tr><td>HelloA4</td><td>HelloB4</td><td>HelloC4</td><td>HelloD4</td><td>HelloE4</td><td>HelloF4</td><td>HelloG4</td><td>HelloH4</td><td>HelloI4</td><td>HelloJ4</td><td>HelloK4</td><td>HelloL4</td><td>HelloM4</td><td>HelloN4</td><td>HelloO4</td><td>HelloP4</td><td>HelloQ4</td><td>HelloR4</td><td>HelloS4</td><td>HelloT4</td><td>HelloU4</td></tr>
  <tr><td>HelloA5</td><td>HelloB5</td><td>HelloC5</td><td>HelloD5</td><td>HelloE5</td><td>HelloF5</td><td>HelloG5</td><td>HelloH5</td><td>HelloI5</td><td>HelloJ5</td><td>HelloK5</td><td>HelloL5</td><td>HelloM5</td><td>HelloN5</td><td>HelloO5</td><td>HelloP5</td><td>HelloQ5</td><td>HelloR5</td><td>HelloS5</td><td>HelloT5</td><td>HelloU5</td></tr>
  <tr><td>HelloA6</td><td>HelloB6</td><td>HelloC6</td><td>HelloD6</td><td>HelloE6</td><td>HelloF6</td><td>HelloG6</td><td>HelloH6</td><td>HelloI6</td><td>HelloJ6</td><td>HelloK6</td><td>HelloL6</td><td>HelloM6</td><td>HelloN6</td><td>HelloO6</td><td>HelloP6</td><td>HelloQ6</td><td>HelloR6</td><td>HelloS6</td><td>HelloT6</td><td>HelloU6</td></tr>
  <tr><td>HelloA7</td><td>HelloB7</td><td>HelloC7</td><td>HelloD7</td><td>HelloE7</td><td>HelloF7</td><td>HelloG7</td><td>HelloH7</td><td>HelloI7</td><td>HelloJ7</td><td>HelloK7</td><td>HelloL7</td><td>HelloM7</td><td>HelloN7</td><td>HelloO7</td><td>HelloP7</td><td>HelloQ7</td><td>HelloR7</td><td>HelloS7</td><td>HelloT7</td><td>HelloU7</td></tr>
  <tr><td>HelloA8</td><td>HelloB8</td><td>HelloC8</td><td>HelloD8</td><td>HelloE8</td><td>HelloF8</td><td>HelloG8</td><td>HelloH8</td><td>HelloI8</td><td>HelloJ8</td><td>HelloK8</td><td>HelloL8</td><td>HelloM8</td><td>HelloN8</td><td>HelloO8</td><td>HelloP8</td><td>HelloQ8</td><td>HelloR8</td><td>HelloS8</td><td>HelloT8</td><td>HelloU8</td></tr>
  <tr><td>HelloA9</td><td>HelloB9</td><td>HelloC9</td><td>HelloD9</td><td>HelloE9</td><td>HelloF9</td><td>HelloG9</td><td>HelloH9</td><td>HelloI9</td><td>HelloJ9</td><td>HelloK9</td><td>HelloL9</td><td>HelloM9</td><td>HelloN9</td><td>HelloO9</td><td>HelloP9</td><td>HelloQ9</td><td>HelloR9</td><td>HelloS9</td><td>HelloT9</td><td>HelloU9</td></tr>
  <tr><td>HelloA10</td><td>HelloB10</td><td>HelloC10</td><td>HelloD10</td><td>HelloE10</td><td>HelloF10</td><td>HelloG10</td><td>HelloH10</td><td>HelloI10</td><td>HelloJ10</td><td>HelloK10</td><td>HelloL10</td><td>HelloM10</td><td>HelloN10</td><td>HelloO10</td><td>HelloP10</td><td>HelloQ10</td><td>HelloR10</td><td>HelloS10</td><td>HelloT10</td><td>HelloU10</td></tr>
</tbody>
</table>

<h1>표 2</h1>
<table class='floating-thead'>
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th><th>F</th><th>G</th><th>H</th><th>I</th><th>J</th><th>K</th><th>L</th><th>M</th><th>N</th><th>O</th><th>P</th><th>Q</th><th>R</th><th>S</th><th>T</th><th>U</th></tr></thead>
<tbody>
  <tr><td>HelloA1</td><td>HelloB1</td><td>HelloC1</td><td>HelloD1</td><td>HelloE1</td><td>HelloF1</td><td>HelloG1</td><td>HelloH1</td><td>HelloI1</td><td>HelloJ1</td><td>HelloK1</td><td>HelloL1</td><td>HelloM1</td><td>HelloN1</td><td>HelloO1</td><td>HelloP1</td><td>HelloQ1</td><td>HelloR1</td><td>HelloS1</td><td>HelloT1</td><td>HelloU1</td></tr>
  <tr><td>HelloA2</td><td>HelloB2</td><td>HelloC2</td><td>HelloD2</td><td>HelloE2</td><td>HelloF2</td><td>HelloG2</td><td>HelloH2</td><td>HelloI2</td><td>HelloJ2</td><td>HelloK2</td><td>HelloL2</td><td>HelloM2</td><td>HelloN2</td><td>HelloO2</td><td>HelloP2</td><td>HelloQ2</td><td>HelloR2</td><td>HelloS2</td><td>HelloT2</td><td>HelloU2</td></tr>
  <tr><td>HelloA3</td><td>HelloB3</td><td>HelloC3</td><td>HelloD3</td><td>HelloE3</td><td>HelloF3</td><td>HelloG3</td><td>HelloH3</td><td>HelloI3</td><td>HelloJ3</td><td>HelloK3</td><td>HelloL3</td><td>HelloM3</td><td>HelloN3</td><td>HelloO3</td><td>HelloP3</td><td>HelloQ3</td><td>HelloR3</td><td>HelloS3</td><td>HelloT3</td><td>HelloU3</td></tr>
  <tr><td>HelloA4</td><td>HelloB4</td><td>HelloC4</td><td>HelloD4</td><td>HelloE4</td><td>HelloF4</td><td>HelloG4</td><td>HelloH4</td><td>HelloI4</td><td>HelloJ4</td><td>HelloK4</td><td>HelloL4</td><td>HelloM4</td><td>HelloN4</td><td>HelloO4</td><td>HelloP4</td><td>HelloQ4</td><td>HelloR4</td><td>HelloS4</td><td>HelloT4</td><td>HelloU4</td></tr>
  <tr><td>HelloA5</td><td>HelloB5</td><td>HelloC5</td><td>HelloD5</td><td>HelloE5</td><td>HelloF5</td><td>HelloG5</td><td>HelloH5</td><td>HelloI5</td><td>HelloJ5</td><td>HelloK5</td><td>HelloL5</td><td>HelloM5</td><td>HelloN5</td><td>HelloO5</td><td>HelloP5</td><td>HelloQ5</td><td>HelloR5</td><td>HelloS5</td><td>HelloT5</td><td>HelloU5</td></tr>
  <tr><td>HelloA6</td><td>HelloB6</td><td>HelloC6</td><td>HelloD6</td><td>HelloE6</td><td>HelloF6</td><td>HelloG6</td><td>HelloH6</td><td>HelloI6</td><td>HelloJ6</td><td>HelloK6</td><td>HelloL6</td><td>HelloM6</td><td>HelloN6</td><td>HelloO6</td><td>HelloP6</td><td>HelloQ6</td><td>HelloR6</td><td>HelloS6</td><td>HelloT6</td><td>HelloU6</td></tr>
  <tr><td>HelloA7</td><td>HelloB7</td><td>HelloC7</td><td>HelloD7</td><td>HelloE7</td><td>HelloF7</td><td>HelloG7</td><td>HelloH7</td><td>HelloI7</td><td>HelloJ7</td><td>HelloK7</td><td>HelloL7</td><td>HelloM7</td><td>HelloN7</td><td>HelloO7</td><td>HelloP7</td><td>HelloQ7</td><td>HelloR7</td><td>HelloS7</td><td>HelloT7</td><td>HelloU7</td></tr>
  <tr><td>HelloA8</td><td>HelloB8</td><td>HelloC8</td><td>HelloD8</td><td>HelloE8</td><td>HelloF8</td><td>HelloG8</td><td>HelloH8</td><td>HelloI8</td><td>HelloJ8</td><td>HelloK8</td><td>HelloL8</td><td>HelloM8</td><td>HelloN8</td><td>HelloO8</td><td>HelloP8</td><td>HelloQ8</td><td>HelloR8</td><td>HelloS8</td><td>HelloT8</td><td>HelloU8</td></tr>
  <tr><td>HelloA9</td><td>HelloB9</td><td>HelloC9</td><td>HelloD9</td><td>HelloE9</td><td>HelloF9</td><td>HelloG9</td><td>HelloH9</td><td>HelloI9</td><td>HelloJ9</td><td>HelloK9</td><td>HelloL9</td><td>HelloM9</td><td>HelloN9</td><td>HelloO9</td><td>HelloP9</td><td>HelloQ9</td><td>HelloR9</td><td>HelloS9</td><td>HelloT9</td><td>HelloU9</td></tr>
  <tr><td>HelloA10</td><td>HelloB10</td><td>HelloC10</td><td>HelloD10</td><td>HelloE10</td><td>HelloF10</td><td>HelloG10</td><td>HelloH10</td><td>HelloI10</td><td>HelloJ10</td><td>HelloK10</td><td>HelloL10</td><td>HelloM10</td><td>HelloN10</td><td>HelloO10</td><td>HelloP10</td><td>HelloQ10</td><td>HelloR10</td><td>HelloS10</td><td>HelloT10</td><td>HelloU10</td></tr>
</tbody>
</table>

<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>

2 같이 보기

• HTML 테이블 틀 고정
• CSS 세로 고정 가로 스크롤‎‎