デモページ
<!DOCTYPE html> <html> <head> <meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport"> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css"> <link rel="stylesheet" href="https://lightbox.sakura.ne.jp/demo/two-section.css"> </head> <body> <div id="head"> </div> <div id="extend"> <table class="table"> <tbody id="tbl"> <th>社員コード</th><th>氏名</th><th>フリガナ</th><th>所属</th><th>性別</th><th>作成日</th><th>更新日</th><th>給与</th><th>手当</th><th>管理者</th><th>生年月日</th> <!-- ここに複数の行データ --> </tbody> </table> </div> </body> </html>
two-section.css
@charset utf-8;
/* ****************************
上下エリア
フィットコントロール用
******************************/
html,body {
height: 100%;
}
/* ****************************
それぞれのエリアの特性
******************************/
/* 基本枠 */
body {
margin: 0;
}
/* 上固定部分 */
#head {
padding: 16px;
display: block;
margin: auto;
width: 100%; /* 幅 */
height: 120px; /* 高さ */
background-color: #e0e0e0;
}
/* 下スクロール部分 */
#extend {
padding: 4px 16px;
display: block;
margin: auto;
width: calc( 100% - 3px ); /* 幅 */
height: calc( 100% - 120px - 2px ); /* 高さ */
border: solid 2px #c0c0c0;
overflow: scroll;
}
/* ****************************
一覧用テーブル
******************************/
/* 列の改行コードを有効 */
td,th {
white-space: pre;
}
/* テーブル内のデータを選択不可 */
#tbl {
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
|
|
