table tbody 스크롤 적용하기(자작)

마스터욱 0 101 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>
Colored by Color Scripter
cs