Tbody에서 스크롤 가능 세로 및 가로 만들기

Question

테이블에서 스크롤 가능 tbody을 만드는 데 문제가 있습니다. 나는 부트 스트랩을 사용했다. 나는 이미 name과 category 열을 끈적 거리며 다른 열도 overflow-x: scroll으로 만든다.

문제는 thead 및 tfoot을 끈적 거리며 스크롤 할 때 tbody 만 만드는 방법입니다. 나는 이미 jsfiddle https://jsfiddle.net/awpt6cL0/1/을 만들었습니다.

감사

Answer 1

여기 다시는 jQuery를 몇 줄을 사용하는 유일한 솔루션 CSS의 아닌 솔루션입니다.

데모 용으로 여기에 jsFiddle이 있습니다.

HTML 코드 :

<table> 
    <thead> 
     <tr> 
      <th>Column 1</th> 
      <th>Column 2</th> 
      <th>Column 3</th> 
      <th>Column 4</th> 
      <th>Column 5</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Row 1</td> 
      <td>Row 1</td> 
      <td>Row 1</td> 
      <td>Row 1</td> 
      <td>Row 1</td> 
     </tr> 
     <tr> 
      <td>Row 2</td> 
      <td>Row 2</td> 
      <td>Row 2</td> 
      <td>Row 2</td> 
      <td>Row 2</td> 
     </tr> 
     <tr> 
      <td>Row 3</td> 
      <td>Row 3</td> 
      <td>Row 3</td> 
      <td>Row 3</td> 
      <td>Row 3</td> 
     </tr> 
     <tr> 
      <td>Row 4</td> 
      <td>Row 4</td> 
      <td>Row 4</td> 
      <td>Row 4</td> 
      <td>Row 4</td> 
     </tr> 
     <tr> 
      <td>Row 5</td> 
      <td>Row 5</td> 
      <td>Row 5</td> 
      <td>Row 5</td> 
      <td>Row 5</td> 
     </tr> 
     <tr> 
      <td>Row 6</td> 
      <td>Row 6</td> 
      <td>Row 6</td> 
      <td>Row 6</td> 
      <td>Row 6</td> 
     </tr> 
     <tr> 
      <td>Row 7</td> 
      <td>Row 7</td> 
      <td>Row 7</td> 
      <td>Row 7</td> 
      <td>Row 7</td> 
     </tr> 
     <tr> 
      <td>Row 8</td> 
      <td>Row 8</td> 
      <td>Row 8</td> 
      <td>Row 8</td> 
      <td>Row 8</td> 
     </tr> 
     <tr> 
      <td>Row 9</td> 
      <td>Row 9</td> 
      <td>Row 9</td> 
      <td>Row 9</td> 
      <td>Row 9</td> 
     </tr> 
     <tr> 
      <td>Row 10</td> 
      <td>Row 10</td> 
      <td>Row 10</td> 
      <td>Row 10</td> 
      <td>Row 10</td> 
     </tr> 
    </tbody> 
    <tfoot> 
     <tr> 
     <td> 
      FOOTER 
     </td> 
     <td> 
      FOOTER 
     </td> 
     <td> 
      FOOTER 
     </td> 
     <td> 
      FOOTER 
     </td> 
     <td> 
      FOOTER 
     </td> 
     </tr> 
    </tfoot> 
</table> 

CSS 코드

html { 
    font-family: verdana; 
    font-size: 10pt; 
    line-height: 25px; 
} 
table { 
    border-collapse: collapse; 
    width: 400px; 
    overflow-x: scroll; 
    display: block; 
} 
thead { 
    background-color: #EFEFEF; 
} 
thead, tbody { 
    display: block; 
} 
tbody { 
    overflow-y: scroll; 
    overflow-x: hidden; 
    height: 140px; 
} 
td, th { 
    min-width: 100px; 
    height: 25px; 
    border: dashed 1px lightblue; 
} 

JQuery와 코드 :이 도움이

$('table').on('scroll', function() { 
    $("table > *").width($("table").width() + $("table").scrollLeft()); 
}); 

희망!