JS가없는 넘치는 div 내부의 크기 조정 테이블

모든 열의 너비가 테이블을 포함하는 div보다 많은 픽셀 인 경우 스크롤 가능한 테이블의 열의 크기를 조정할 수 있습니까? 문제는 필자가 20 열과 같은 것을 가지고 있고 열의 크기를 조정할 수있는 테이블을 스크롤 할 수있게해야한다는 것이다. 나는 JS mousemove, mouseup 및 mousedown 이벤트를 성공적으로 수행했지만 CSS를 사용하여이를 수행하려고 노력 중이므로 사용자에게 더 적은 리소스가 소요됩니다. 예 아래 :JS가없는 넘치는 div 내부의 크기 조정 테이블

<div style="overflow-x:scroll;overflow-y:scroll;max-height:300px;max-width:500px;background-color:gray;"> 
    <table> 
    <thead> 
     <tr> 
      <th style="resize:horizontal;overflow: auto;">TESTTESTESTEST</th> 
      <th style="resize:horizontal;overflow: auto;">TESTTESTESTEST</th> 
      <th style="resize:horizontal;overflow: auto;">TESTTESTESTEST</th> 
      <th style="resize:horizontal;overflow: auto;">TESTTESTESTEST</th> 
      <th style="resize:horizontal;overflow: auto;">TESTTESTESTEST</th> 
      <th style="resize:horizontal;overflow: auto;">TESTTESTESTEST</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td>TESTTESTESTESTESTSTETSET</td> 
     <td>TESTTESTESTESTESTSTETSET</td> 
     <td>TESTTESTESTESTESTSTETSET</td> 
     <td>TESTTESTESTESTESTSTETSET</td> 
     <td>TESTTESTESTESTESTSTETSET</td> 
     <td>TESTTESTESTESTESTSTETSET</td> 
     </tr> 
    </tbody> 
    </table> 
</div>

출처

2017-11-15 radoix

확인이 코드, 당신이 찾고있는이되면 무엇을 :

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
table { 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
    width: 100%; 
 
    border: 1px solid #ddd; 
 
} 
 

 
th, td { 
 
    text-align: left; 
 
    padding: 8px; 
 
} 
 

 
tr:nth-child(even){background-color: #f2f2f2} 
 
</style> 
 
</head> 
 
<body> 
 

 
<h2>Table which can scroll and column will automatically resize</h2> 
 
<div style="overflow-x:auto;"> 
 
    <table> 
 
    <tr> 
 
     <th>First Name</th> 
 
     <th>Last Name</th> 
 
     <th>Points</th> 
 
     <th>Points</th> 
 
     <th>Points</th> 
 
     <th>Points</th> 
 
     <th>Points</th> 
 
     <th>Points</th> 
 
     <th>Points</th> 
 
     <th>Points</th> 
 
     <th>Points</th> 
 
     <th>Points</th> 
 
    </tr> 
 
    <tr> 
 
     <td>hello</td> 
 
     <td>bye</td> 
 
     <td>50</td> 
 
     <td>50</td> 
 
     <td>50</td> 
 
     <td>50</td> 
 
     <td>50</td> 
 
     <td>50</td> 
 
     <td>50</td> 
 
     <td>50</td> 
 
     <td>50</td> 
 
     <td>50</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Abc</td> 
 
     <td>xyz</td> 
 
     <td>94</td> 
 
     <td>94</td> 
 
     <td>94</td> 
 
     <td>94</td> 
 
     <td>94</td> 
 
     <td>94</td> 
 
     <td>94</td> 
 
     <td>94</td> 
 
     <td>94</td> 
 
     <td>94</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Arun</td> 
 
     <td>Kumar</td> 
 
     <td>67</td> 
 
     <td>67</td> 
 
     <td>67</td> 
 
     <td>67</td> 
 
     <td>67</td> 
 
     <td>67</td> 
 
     <td>67</td> 
 
     <td>67</td> 
 
     <td>67</td> 
 
     <td>67</td> 
 
    </tr> 
 
    </table> 
 
</div> 
 

 
</body> 
 
</html>

출처

2017-11-15 14:37:03 AKNair

내가 해냈어! 크기 조정 가능한 열 코드 : '

TESTTESTESTEST

' – radoix

대단합니다! 위 코드를 실행하는 데 어려움이 있으면 게시를 수행하십시오. – AKNair

JS가없는 넘치는 div 내부의 크기 조정 테이블

답변

관련 문제