땀나는 애

[html+css] 반응형_테이블 본문

쭈구리 코딩/내가 보고 쓰려고 모은 것

[html+css] 반응형_테이블

달콤썸머 2019. 12. 31. 13:16
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
<style>
@media all and (max-width:600px){
/* 모바일 테이블 가로스크롤 */
.mb_scroll{position:relative}
.mb_scroll .tbBox{position:relative;padding-top:30px;width:100%;overflow:auto}
.mb_scroll table{width:640px}
.mb_scroll::before{position:absolute;top:0;left:50%;content:'좌우로 스크롤을 움직이면 내용을 볼 수 있습니다';font-size:13px;display: inline-block;padding: 2px 0 2px 82px;background: url(../img/common/mb_scroll.png)left center no-repeat;transform: translateX(-50%);-ms-transform: translateX(-50%);white-space: nowrap;}
}
</style>
 
<div class="mb_scroll" style="user-select: auto;">
    <div class="tbBox" style="user-select: auto;">
        <table class="t_typel" style="user-select: auto;">
            <caption style="user-select: auto;">시설안내·특수보육시설 현황표입니다.</caption>
            <thead style="user-select: auto;">
                <tr style="user-select: auto;">
                    <th scope="col" style="user-select: auto;">유형</th>
                    <th scope="col" style="user-select: auto;">구분</th>
                    <th scope="col" style="user-select: auto;">시설명</th>
                    <th scope="col" style="user-select: auto;">주소 </th>
                    <th scope="col" style="user-select: auto;">전화번호</th>
                    <th scope="col" style="user-select: auto;">정원</th>
                </tr>
            </thead>
            <tfoot style="user-select: auto;">
                <tr style="user-select: auto;">
                    <th scope="row" style="user-select: auto;">영아전담</th>
                    <td style="user-select: auto;">법인</td>
                    <td style="user-select: auto;">은솔어린이집</td>
                    <td style="user-select: auto;">중구동 493-23 </td>
                    <td style="user-select: auto;">756-2662</td>
                    <td style="user-select: auto;">39</td>
                </tr>
            </tfoot>
            <tbody style="user-select: auto;">
                <tr style="user-select: auto;">
                    <th scope="row" style="user-select: auto;">영아전담</th>
                    <td style="user-select: auto;">민간</td>
                    <td style="user-select: auto;">성모어린이집</td>
                    <td style="user-select: auto;">망미1동 792-32 </td>
                    <td style="user-select: auto;">751-9820</td>
                    <td style="user-select: auto;">39</td>
                </tr>
                <tr style="user-select: auto;">
                    <th scope="row" style="user-select: auto;">영아전담</th>
                    <td style="user-select: auto;">민간</td>
                    <td style="user-select: auto;">성모어린이집</td>
                    <td style="user-select: auto;">망미1동 792-32 </td>
                    <td style="user-select: auto;">751-9820</td>
                    <td style="user-select: auto;">39</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
저작자표시 비영리 변경금지

'쭈구리 코딩 > 내가 보고 쓰려고 모은 것' 카테고리의 다른 글

[css] hover_ 모양 확대 (transform:scale)  (0) 2020.01.22
[Error] 태그 글자 넘침 현상, 말줄임표  (0) 2020.01.09
[html+css] hover_ 이미지hover시 올라가기up  (0) 2019.12.31
[html+css]hover_이미 hover시 다른 이미지 바뀜  (0) 2019.12.31
[Script] dropdown menu_드롭다운메뉴 2,3뎁스  (0) 2019.12.31
'쭈구리 코딩/내가 보고 쓰려고 모은 것' Related Articles more
Comments