<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document99</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.container {
/* background-color: dimgray;
outline: 1px solid black; */
height: 100vh;
}
.wrap {
margin: 0 auto;
width: 80%;
background-color: thistle;
height: 100vh;
}
.nav{
padding: 20px 0 10px 0;
}
.link {
width: 60%;
margin: 0 0 0 auto;
/* background-color: rgba(149, 199, 247, 0.644); */
}
.link ul {
list-style-type: none;
overflow: hidden;
}
.link ul li:first-of-type{
margin-left: 40px;
}
.link ul li {
float: left;
padding-left: 30px;
}
.mainsub{
/* background-color: aquamarine;
outline: 1px solid black; */
}
.t1 {
width: 100%;
border-collapse: collapse; /* セルの線を重ねる */
empty-cells: show;
}
.t1 td {
height: 1rem;
}
.t1 th,td {
border: solid 1px; /* 枠線指定 */
}
.t1 th{
width: 100px;
}
.tablewrap{
margin: 0 auto;
position:relative;
overflow:scroll;
background-color: blueviolet;
width: 70%;
height: 200px;
}
.t1h, .t1main{
width: 100vw;
}
.t1h{
background-color: coral;
position:sticky;
top:0;
left:0;
/* position: absolute;
top:0;
left:0; */
}
.t1main td,.t1main th{
height: 30px;
}
</style>
<body>
<div class="container">
<div class="wrap">
<div class="nav">
<!-- <div class="link">
<ul>
<li><button>リンク１</button></li>
<li><button>リンク２</button></li>
<li><button>リンク３</button></li>
<li><button>リンク４</button></li>
<li><button>リンク５</button></li>
</ul>
</div> -->
</div>
<div class="main">
<div class="mainsub">
<div class="tablewrap">
<div class="t1h">
<table class="t1">
<tr>
<th>ああああ</th>
<th>いいいい</th>
<th>うううう</th>
<th>ええええ</th>
<th>おおおお</th>
</tr>
</table>
</div>
<div class="t1main">
<table class="t1">
<tr>
<th>test</th>
<th>sample</th>
<th>sample2</th>
<th>sample3</th>
<th>sample4</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>samplesample</td>
<td>samplesample</td>
<td>samplesample</td>
<td>samplesample</td>
<td>samplesample</td>
</tr>
<tr>
<td>samplesample</td>
<td>samplesample</td>
<td>samplesample</td>
<td>samplesample</td>
<td>samplesample</td>
</tr>
<tr>
<td>samplesample</td>
<td>samplesample</td>
<td>samplesample</td>
<td>samplesample</td>
<td>samplesample</td>
</tr>
<tr>
<td>samplesample</td>
<td>samplesample</td>
<td>samplesample</td>
<td>samplesample</td>
<td>samplesample</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
More than 3 years have passed since last update.
Register as a new user and use Qiita more conveniently
- You get articles that match your needs
- You can efficiently read back useful information
- You can use dark theme