반응형_테이블

작성자 관리자 작성일21-02-02 09:45 조회4,176회 댓글0건

본문

<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="" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter

댓글목록

등록된 댓글이 없습니다.

디자인 TIP 목록
번호	제목	글쓴이	날짜	조회
107	검색엔진 사이트 맵 만들기	관리자	03-23	2904
106	인공지능을 이용하여 말하는 아바타 를 만드는 방법	관리자	03-01	2820
105	스크롤 내릴때 이미지 확대	관리자	02-25	4188
104	On-Scroll Typography Animations	관리자	02-19	2676
103	가로로 흐르는 텍스트 css	관리자	02-18	2532
102	반응형 display : grid 소스	관리자	02-17	2826
101	반응형 메뉴 샘플들	관리자	02-05	4242
100	mediaQuery	관리자	02-03	5202
99	rss 만들기 사이트 (ft. 네이버 웹마스터 도구 rss)	관리자	02-02	3108
98	반응형 메뉴	관리자	01-28	2928
97	PC, 태블릿, 모바일용 CSS 미디어 쿼리(Media Query)	관리자	01-18	3294
96	지도 좌표 구하기	관리자	10-19	3360
95	고용량 메모리카드 FAT32 포맷 방법	관리자	10-12	5496
94	무료 이미지 작업 사이트	관리자	05-31	6306
93	카카오맵 지도퍼가기 가로 사이즈 %로 설정하기	관리자	03-22	4782
92	포토샵 빛 만들기	관리자	03-20	3990
91	반응형 테이블에 가로 스크롤 / 횡스크롤 적용 방법	관리자	03-04	4494
90	CSS에서 360도로 계속 회전하는 이미지 구현	관리자	02-04	4968
열람중	반응형_테이블	관리자	02-02	4182
88	반응형 테이블에 가로 스크롤 / 횡스크롤 적용 방법	관리자	02-01	5964
87	왼쪽 메뉴 고정(ie도 가능)	관리자	01-29	4086
86	메뉴 고정	관리자	01-27	3450
85	비주얼 스튜디오 코드	관리자	01-26	4128
84	교회 관련 로고 다운	관리자	01-21	3816
83	에디터 플러스	관리자	08-05	5352
82	유튜브 광고 차단	관리자	07-21	5280
81	안심글꼴 서비스	관리자	06-19	5268
80	컴퓨터 ip 변경 방법	관리자	06-16	4698
79	설치 없이 사용 가능한 무료 악성코드 제거 도구	관리자	05-09	5022
78	이미지 가운데 정렬	관리자	04-18	5562
77	다음지도 좌표 나오게 하는방법	관리자	04-13	6336
76	무료 글꼴	관리자	03-26	9090
75	반응형 주메뉴	관리자	03-16	7230
74	CSS 단위별 폰트사이즈(px,pt,em,%)	관리자	03-11	6864
73	타임 라인	관리자	01-31	6120
72	MS Office 2019 마소 Office 최신버전 정품	관리자	01-10	6942
71	이미지 마우스 오버 효과	관리자	01-08	5754
70	모바일 바탕화면 바로가기 아이콘 만들기	관리자	12-31	6408
69	w3schools.com	관리자	12-26	6090
68	div 안 보이게	관리자	12-23	6552
67	css 공부	관리자	12-23	6762
66	타임라인	관리자	12-18	5844
65	블로그에 유튜브 영상 반응형으로 넣기	관리자	12-13	10230
64	<br class="hidden-xs">	관리자	12-12	6984
63	이미지를 div 크기에 맞게 확장하여 채우는 방법	관리자	12-12	8418
62	CSS만으로 DIV의 위치 바꾸기	관리자	12-12	6558
61	단드롭패턴 w/ 미디어쿼리\|작성자	관리자	12-12	6780
60	영역의 보이기 순서(z-index)를 지정한 태그 모양	관리자	12-12	5592
59	푸시 앤 풀을 이용한 열 순서 조작	관리자	12-12	5736
58	container	관리자	12-12	5910

디자인 TIP 목록

번호

제목

글쓴이

날짜

조회

107

검색엔진 사이트 맵 만들기 인기글