Skip to content

Instantly share code, notes, and snippets.

@Luavis

Luavis/sticky-table.html

Created June 8, 2020 10:55
Show Gist options
  • Save Luavis/25fe3e09ea078f03c90a0e0b5cdb35c2 to your computer and use it in GitHub Desktop.
Save Luavis/25fe3e09ea078f03c90a0e0b5cdb35c2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
sticky-table.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.table-wrap {
/* width: 300px; */
height: 300px;
overflow: auto;
}
table {
min-width: 500px;
border-collapse: separate;
border-spacing: 0;
position: relative;
}
table th, td {
border-bottom: 1px solid black;
}
table thead th {
position: sticky;
top: 0;
background: white;
z-index: 10;
}
</style>
</head>
<body>
<div class="table-wrap">
<table>
<thead>
<tr>
<th width="100">#</th>
<th width="100">Hello</th>
<th>World</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Hello</td>
<td>world</td>
</tr>
<tr>
<td>2</td>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>3</td>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>4</td>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>5</td>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>6</td>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>7</td>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>8</td>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>1-1</td>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>2-1</td>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>3-1</td>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>4-1</td>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>5-1</td>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>6-1</td>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>7-1</td>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>8-1</td>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>1-2</td>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>2-2</td>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>3-2</td>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>4-2</td>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>5-2</td>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>6-2</td>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>7-2</td>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>8-2</td>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>1-3</td>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>2-3</td>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>3-3</td>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>4-3</td>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>5-3</td>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>6-3</td>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>7-3</td>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>8-3</td>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td colspan="3">
<span style="position: sticky; left: calc(50% - 25px);">더보기</span>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment