CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのスクロールでヘッダーが固定されたHTMLテーブル

postion：stickyとtop：0を設定することで、HTMLテーブルのスクロールに固定ヘッダーを作成できます。

例

次の例は、これを実装する方法のアイデアを示しています-

<!DOCTYPE html>
<html>
<head>
<style>
div {
   color: white;
   display: flex;
   padding: 2%;
   background-color: rgba(190,155,150);
   height: 135px;
   overflow-y: scroll;
}
td,th,p {
   text-align: center;
   font-size: 1.25em;
}
table {
   padding: 3%;
   border-collapse: collapse;
   border: 2px ridge green;
}
th {
   top: 0;
   position: sticky;
   background: #e5d2f1;
   color: black;
}
</style>
</head>
<body>
<div>
<table>
<thead>
<tr>
<th>A </th>
<th>B </th>
<th>C </th>
<th>D </th>
<th>E </th>
</tr>
</thead>
<tr>
<td>Hey</td>
<td>Hey</td>
<td>Hey</td>
<td>Hey</td>
<td>Hey</td>
</tr>
<tr>
<td>Demo</td>
<td>Demo</td>
<td>Demo</td>
<td>Demo</td>
<td>Demo</td>
</tr>
<tr>
<td>Yo</td>
<td>Yo</td>
<td>Yo</td>
<td>Yo</td>
<td>Yo</td>
</tr>
<tr>
<td>Demo</td>
<td>Demo</td>
<td>Demo</td>
<td>Demo</td>
<td>Demo</td>
</tr>
</table>
<p>
Duis tincidunt fermentum ipsum vel sagittis. Sed ultrices quis dui ut rutrum. Quisque et varius tellus, ut vestibulum purus. Etiam in erat fringilla, laoreet libero eu, facilisis ante. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis eu ornare augue, ut facilisis odio.
</p>
</div>
</body>
</html>

出力

これにより、次の結果が生成されます-

CSSのスクロールでヘッダーが固定されたHTMLテーブル

例

<!DOCTYPE html>
<html>
<head>
<style>
div {
   padding: 2%;
   height: 40px;
   overflow-y: scroll;
   box-shadow: inset 0 0 12px lightgreen;
}
tr th {
   background: #25f2f1;
}
table {
   text-align: center;
   position: relative;
   border-collapse: separated;
   width: 100%;
}
th {
   top: 0;
   position: sticky;
   background: white;
}
</style>
</head>
<body>
<div>
<table>
<thead>
<tr>
<th>A </th>
<th>B </th>
<th>C </th>
<th>D </th>
<th>E </th>
</tr>
</thead>
<tr>
<td>Hey</td>
<td>Hey</td>
<td>Hey</td>
<td>Hey</td>
<td>Hey</td>
</tr>
<tr>
<td>Demo</td>
<td>Demo</td>
<td>Demo</td>
<td>Demo</td>
<td>Demo</td>
</tr>
<tr>
<td>Yo</td>
<td>Yo</td>
<td>Yo</td>
<td>Yo</td>
<td>Yo</td>
</tr>
<tr>
<td>Demo</td>
<td>Demo</td>
<td>Demo</td>
<td>Demo</td>
<td>Demo</td>
</tr>
</table>
</div>
</body>
</html>

出力

これにより、次の結果が生成されます-

CSSのスクロールでヘッダーが固定されたHTMLテーブル


  1. CSSとJavaScriptを使用してスクロール時にヘッダーを縮小するにはどうすればよいですか？

    CSSとJavaScriptを使用してスクロールのヘッダーを縮小するには、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe UI", Tahoma, Genev

  2. CSSを使用してスクロール上の固定ナビゲーションバーを作成するにはどうすればよいですか？

    CSSのpositionプロパティを指定することで、CSSを使用して固定ナビゲーションバーを作成できます。 CSSのpositionプロパティの構文は次のとおりです- Selector {    position: /*value*/; } 以下は、CSS位置プロパティの例です。 例 <!DOCTYPE html> <html> <head> <style> #navigation-bar {    overflow: hidden;    box-shadow: inset 0 0