<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"> <style> .list_box {border-top:solid 1px #C9D8DC; border-left:solid 1px #C9D8DC;width:100%;} .list_box>thead>tr>th {height:30px; border-bottom:solid 1px #C9D8DC; border-right:solid 1px #C9D8DC; background-color:#E1EAF0;font-size:0.6em;} .list_box>tbody>tr>td {border-bottom:solid 1px #C9D8DC; border-right:solid 1px #C9D8DC; text-align:center;font-size:0.6em;} </style> <style type="text/css"> .scrolltable { overflow-x: auto; /*overflow-y:hidden;*/ height: 100%; display: flex; display: -webkit-flex; flex-direction: column; -webkit-flex-direction: column; } .scrolltable > .header { } .scrolltable > .body { /*noinspection CssInvalidPropertyValue*/ /*width: -webkit-fit-content;*/ overflow-y: auto; flex: 1; -webkit-flex: 1; } th, td { min-width: 4em; } /* an outside constraint to react against */ #constrainer { width: 100%; } /* only styling below here */ #constrainer { } table { border-collapse: collapse; } th, td { /*border: 1px solid gray;*/ } th { background-color: lightgrey; border-width: 1px; } td { border-width: 1px; } tr:first-child td { border-top-width: 0; } tr:nth-child(even) { background-color: #eee; } </style> <script src="@Url.Content("~/resource/common/js/jquery-1.11.1.min.js")"></script> </head> <body style="overflow:hidden;"> <div id="constrainer"> <div class="scrolltable"> <table class="header list_box"> <thead> <tr> <th>일자</th> </tr> </thead> </table> <div class="body" > <table class="list_box"> <tbody> @foreach (var item in Model) { <tr> <td>@item.StatDate.Substring(5)</td> </tr> } </tbody> </table> </div> </div> </div> <script> $(function () { var height = $(window).height() - 15; $("#constrainer").css({ "height": height }); }); </script> </body> </html>
테이블의 헤더 영역은 고정하고, 컨텐츠 영역만 스크롤 처리할때.
'HTML 이야기' 카테고리의 다른 글
| 순수 CSS로 테이블 행 및 열 고정 처리. (0) | 2015.12.31 |
|---|---|
| HTML5 Canvas 가지고 놀기 2번째!! (0) | 2012.06.05 |
| HTML5 Web Worker (0) | 2012.06.04 |
| HTML5 Storage (0) | 2012.06.04 |
| HTML5 Canvas 가지고 놀기~! (0) | 2012.05.31 |