Fixed Headers and Horizontal Scrolling in bootstrap 4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<script>
window.onload = function () {
var tableCont = document.querySelector('#table-sample')
function scrollHandle(e) {
var scrollTop = this.scrollTop;
this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
}
tableCont.addEventListener('scroll', scrollHandle)
}
</script>
</head>
<body>
<div class='table-responsive' style="max-height: 200px;overflow: auto;" id='table-sample'>
<table class="table table-bordered table-hover">
<thead class="thead-light">
<tr>
<th>#</th>
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
<th>Header5</th>
<th>Header6</th>
<th>Header7</th>
<th>Header8</th>
<th>Header9</th>
<th>Header10</th>
<th>Header11</th>
<th>Header12</th>
<th>Header13</th>
<th>Header14</th>
<th>Header15</th>
<th>Header16</th>
<th>Header17</th>
<th>Header18</th>
<th>Header19</th>
<th>Header20</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>body1</td>
<td>body2</td>
<td>body3</td>
<td>body4</td>
<td>body5</td>
<td>body6</td>
<td>body7</td>
<td>body8</td>
<td>body9</td>
<td>body10</td>
<td>body11</td>
<td>body12</td>
<td>body13</td>
<td>body14</td>
<td>body15</td>
<td>body16</td>
<td>body17</td>
<td>body18</td>
<td>body19</td>
<td>body20</td>
</tr>
<tr>
<th scope="row">2</th>
<td>body1</td>
<td>body2</td>
<td>body3</td>
<td>body4</td>
<td>body5</td>
<td>body6</td>
<td>body7</td>
<td>body8</td>
<td>body9</td>
<td>body10</td>
<td>body11</td>
<td>body12</td>
<td>body13</td>
<td>body14</td>
<td>body15</td>
<td>body16</td>
<td>body17</td>
<td>body18</td>
<td>body19</td>
<td>body20</td>
</tr>
<tr>
<th scope="row">3</th>
<td>body1</td>
<td>body2</td>
<td>body3</td>
<td>body4</td>
<td>body5</td>
<td>body6</td>
<td>body7</td>
<td>body8</td>
<td>body9</td>
<td>body10</td>
<td>body11</td>
<td>body12</td>
<td>body13</td>
<td>body14</td>
<td>body15</td>
<td>body16</td>
<td>body17</td>
<td>body18</td>
<td>body19</td>
<td>body20</td>
</tr>
<tr>
<th scope="row">4</th>
<td>body1</td>
<td>body2</td>
<td>body3</td>
<td>body4</td>
<td>body5</td>
<td>body6</td>
<td>body7</td>
<td>body8</td>
<td>body9</td>
<td>body10</td>
<td>body11</td>
<td>body12</td>
<td>body13</td>
<td>body14</td>
<td>body15</td>
<td>body16</td>
<td>body17</td>
<td>body18</td>
<td>body19</td>
<td>body20</td>
</tr>
<tr>
<th scope="row">5</th>
<td>body1</td>
<td>body2</td>
<td>body3</td>
<td>body4</td>
<td>body5</td>
<td>body6</td>
<td>body7</td>
<td>body8</td>
<td>body9</td>
<td>body10</td>
<td>body11</td>
<td>body12</td>
<td>body13</td>
<td>body14</td>
<td>body15</td>
<td>body16</td>
<td>body17</td>
<td>body18</td>
<td>body19</td>
<td>body20</td>
</tr>
<tr>
<th scope="row">6</th>
<td>body1</td>
<td>body2</td>
<td>body3</td>
<td>body4</td>
<td>body5</td>
<td>body6</td>
<td>body7</td>
<td>body8</td>
<td>body9</td>
<td>body10</td>
<td>body11</td>
<td>body12</td>
<td>body13</td>
<td>body14</td>
<td>body15</td>
<td>body16</td>
<td>body17</td>
<td>body18</td>
<td>body19</td>
<td>body20</td>
</tr>
<tr>
<th scope="row">7</th>
<td>body1</td>
<td>body2</td>
<td>body3</td>
<td>body4</td>
<td>body5</td>
<td>body6</td>
<td>body7</td>
<td>body8</td>
<td>body9</td>
<td>body10</td>
<td>body11</td>
<td>body12</td>
<td>body13</td>
<td>body14</td>
<td>body15</td>
<td>body16</td>
<td>body17</td>
<td>body18</td>
<td>body19</td>
<td>body20</td>
</tr>
<tr>
<th scope="row">8</th>
<td>body1</td>
<td>body2</td>
<td>body3</td>
<td>body4</td>
<td>body5</td>
<td>body6</td>
<td>body7</td>
<td>body8</td>
<td>body9</td>
<td>body10</td>
<td>body11</td>
<td>body12</td>
<td>body13</td>
<td>body14</td>
<td>body15</td>
<td>body16</td>
<td>body17</td>
<td>body18</td>
<td>body19</td>
<td>body20</td>
</tr>
<tr>
<th scope="row">9</th>
<td>body1</td>
<td>body2</td>
<td>body3</td>
<td>body4</td>
<td>body5</td>
<td>body6</td>
<td>body7</td>
<td>body8</td>
<td>body9</td>
<td>body10</td>
<td>body11</td>
<td>body12</td>
<td>body13</td>
<td>body14</td>
<td>body15</td>
<td>body16</td>
<td>body17</td>
<td>body18</td>
<td>body19</td>
<td>body20</td>
</tr>
<tr>
<th scope="row">10</th>
<td>body1</td>
<td>body2</td>
<td>body3</td>
<td>body4</td>
<td>body5</td>
<td>body6</td>
<td>body7</td>
<td>body8</td>
<td>body9</td>
<td>body10</td>
<td>body11</td>
<td>body12</td>
<td>body13</td>
<td>body14</td>
<td>body15</td>
<td>body16</td>
<td>body17</td>
<td>body18</td>
<td>body19</td>
<td>body20</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
标签：
技巧
相关文章
使用git commit --fixup修改之前的提交
使用git commit --amend可以简单的修改前一条记录，但是不能修改前面第 N 次提交记录，这个时候使用git commit --fixup可以修改前面的提交第 N 次记录。
在Windows上使用pg_upgrade升级PostgreSQL
本文将介绍 PostgreSQL 数据库从 9.x 版本升级到 11.x 版本。升级 PostgreSQL 时 可以把新版本的...
如何在中国注册观看奈飞（Netflix）
喜欢追美剧的网友可能听说过“奈飞”（Netflix）这个平台。奈飞到底是什么？在中国能看奈飞吗？看奈飞需要翻墙吗？如何注册奈飞账号？