table tbody 스크롤 적용하기(자작)
마스터욱
0
15
0
0
2017-08-20 01:54:11
결국은 내가 만들어서 내가 쓴다!
스텍형이 준 소스도 완전하지 않은 관계로 손수 한땀한땀 제작했다.
욱을 찬양하라!!!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | <div class="scroll_table"> <table border="1"> <thead> <tr> <th>1234234</th> <th>212312</th> <th>323234234234234</th> <th>4111</th> </tr> </thead> <tbody> <tr> <td><div>1234234234234234</div></td> <td><div>1</div></td> <td><div>1</div></td> <td><div>1</div></td> </tr> <tr> <td><div>1</div></td> <td><div>1</div></td> <td><div>1</div></td> <td><div>1</div></td> </tr> <tr> <td><div>1</div></td> <td><div>1</div></td> <td><div>1</div></td> <td><div>1</div></td> </tr> <tr> <td><div>1</div></td> <td><div>1</div></td> <td><div>1</div></td> <td><div>1</div></td> </tr> <tr> <td><div>1</div></td> <td><div>1</div></td> <td><div>1</div></td> <td><div>1</div></td> </tr> <tr> <td><div>1</div></td> <td><div>1</div></td> <td><div>1</div></td> <td><div>1</div></td> </tr> </tbody> </table> </div> <script src="//code.jquery.com/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".scroll_table").each(function(){ var thArr = new Array(); $(this).find("th").each(function(){ var width = $(this).css("width"); width = width.replace("px", ""); width = parseInt(width) + 1; thArr.push(width); }); var thCnt = thArr.length; var tdCnt = 0; $(this).find("td").each(function(){ $(this).css("width", thArr[tdCnt]); $(this).find("div").css("width", thArr[tdCnt]); tdCnt++; if(tdCnt > thCnt){ return true; } }); }); }); </script> <style type="text/css"> .scroll_table table { border-collapse:collapse; } .scroll_table table thead, tbody { overflow-y:scroll; display:block; } .scroll_table table tbody { height:100px; } .scroll_table table th { background-color:#F1F1F1; padding:10px; } .scroll_table table td { padding:10px; } .scroll_table table td div{ display:block; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow:hidden; } </style> | cs |
