크로스 브라우저 호환 스크롤 테이블

Question

화면의 50 %를 차지하는 테이블을 만들려고합니다. 그러나 테이블보다 많은 정보가 있으면 스크롤 할 수 있어야합니다. 나는 이것을하기 위해 여러 가지 방법을 시도해 왔지만 나는 아무 것도 발견되지 않았다. 모든 브라우저와 호환되는 브라우저 여야하며 이전 버전의 브라우저를 사용하는 것이 더 바람직합니다. 어떻게해야합니까? 미리 감사드립니다! 내가 그 일을 시도

table { 
 
    height: 100px; 
 
    overflow-y: scroll; 
 
}

<table class="w3-table-all"> 
 
<thead> 
 
    <tr class="w3-red"> 
 
    <th>First Name</th> 
 
    <th>Last Name</th> 
 
    <th>Points</th> 
 
    </tr> 
 
</thead> 
 
<tbody> 
 
    <tr> 
 
    <td>Jill</td> 
 
    <td>Smith</td> 
 
    <td>50</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Eve</td> 
 
    <td>Jackson</td> 
 
    <td>94</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Adam</td> 
 
    <td>Johnson</td> 
 
    <td>67</td> 
 
    </tr> 
 
</tbody> 
 
</table>

하지만 여전히 작동하지 않습니다 Note: I am using w3.css 일부 코드 나는 노력했다. 나는 또한 그 다양한 조합을 시도해 보았다. tbody, tr, td 등을 스타일링했다. 아무도 스크롤바를 보지 않았다.

Answer 1

먼저 div 안에 테이블을 놓고 지정된 높이와 오버 플로우를 해당 div의 클래스에 놓는다. 스크롤 할 수있게된다.

CSS

.table-scroll { 
    border: 1px solid #000; 
    width:50%; 
    height: 100px; 
    overflow-y: scroll; 
} 

HTML 여기

<div class="table-scroll"> 
<table class="w3-table-all"> 
<thead> 
    <tr class="w3-red"> 
    <th>First Name</th> 
    <th>Last Name</th> 
    <th>Points</th> 
    </tr> 
</thead> 
<tbody> 
<tr> 
    <td>Jill</td> 
    <td>Smith</td> 
    <td>50</td> 
</tr> 
<tr> 
    <td>Eve</td> 
    <td>Jackson</td> 
    <td>94</td> 
</tr> 
<tr> 
    <td>Adam</td> 
    <td>Johnson</td> 
    <td>67</td> 
</tr> 
</tbody> 
</table> 
</div> 

는 jsfiddle에 대한 참조입니다.