ホームページ > 記事 > ウェブフロントエンド > HTMLでテーブルのヘッダーを動かさないようにする方法
HTMLでテーブルのヘッダーを動かさないようにする方法
- 藏色散人オリジナル
- 2021-06-03 11:05:063936ブラウズ
htmlテーブルのヘッダーが移動しないことを実現する方法: まず、コンテンツをスクロールする領域を tbody タグで制御し、「overflow-y: auto;」スタイルを追加してから、「」を追加します。 table-layout:"をtrタグに。fixed;"でヘッダーを修正します。
この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。
HTML テーブル テーブル固定ヘッダー本体とスクロール バー
純粋な CSS テーブル テーブル固定ヘッダー本体スクロール効果
プロジェクトのニーズにより、テーブル内に, データ量が増えるとスクロール バーが表示され、スクロール プロセス中に、デフォルトでテーブル ヘッダーがテーブルの内容とともにスクロールするため、ヘッダーに対応するフィールド名が表示されなくなり、エクスペリエンスに影響します。
実装アイデア:
コンテンツがスクロールされる領域を制御する tbody タグに overflow-y: auto; style を追加しますそれを tr タグに渡します table-layout:fixed; (これがコアです) スタイルを追加します tbody にはスクロール バーがあるため、スクロール バーもスペースを占有する必要があり、これにより tbody と thead がそのため、tbodyの幅を設定する際には、スクロールバーの幅も追加する必要があります（スクロールバーを表示したくない場合は、スクロールバーの幅を0pxに設定すると、スクロールバーの幅が0pxに設定されます）バーが消えます。
以下はレンダリングであり、特定の完全なサンプル コードも以下にあります:
完全なサンプル コード:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>纯CSS table表格 thead固定 tbody滚动</title>
<style>
.table-box {
margin: 100px auto;
width: 1024px;
}
/* 滚动条宽度 */
::-webkit-scrollbar {
width: 8px;
background-color: transparent;
}
/* 滚动条颜色 */
::-webkit-scrollbar-thumb {
background-color: #27314d;
}
table {
width: 100%;
border-spacing: 0px;
border-collapse: collapse;
}
table caption{
font-weight: bold;
font-size: 24px;
line-height: 50px;
}
table th, table td {
height: 50px;
text-align: center;
border: 1px solid gray;
}
table thead {
color: white;
background-color: #38F;
}
table tbody {
display: block;
width: calc(100% + 8px); /*这里的8px是滚动条的宽度*/
height: 300px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
table tfoot {
background-color: #71ea71;
}
table thead tr, table tbody tr, table tfoot tr {
box-sizing: border-box;
table-layout: fixed;
display: table;
width: 100%;
}
table tbody tr:nth-of-type(odd) {
background: #EEE;
}
table tbody tr:nth-of-type(even) {
background: #FFF;
}
table tbody tr td{
border-bottom: none;
}
</style>
</head>
<body>
<section>
<table cellpadding="0" cellspacing="0">
<caption>纯CSS table表格 thead固定 tbody滚动</caption>
<thead>
<tr>
<th>序 号</th>
<th>姓 名</th>
<th>年 龄</th>
<th>性 别</th>
<th>手 机</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Name</td>
<td>28</td>
<td>女</td>
<td>Mobile</td>
</tr>
<tr>
<td>002</td>
<td>Name</td>
<td>28</td>
<td>男</td>
<td>Mobile</td>
</tr>
<tr>
<td>003</td>
<td>Name</td>
<td>28</td>
<td>女</td>
<td>Mobile</td>
</tr>
<tr>
<td>004</td>
<td>Name</td>
<td>28</td>
<td>男</td>
<td>Mobile</td>
</tr>
<tr>
<td>005</td>
<td>Name</td>
<td>28</td>
<td>女</td>
<td>Mobile</td>
</tr>
<tr>
<td>006</td>
<td>Name</td>
<td>28</td>
<td>男</td>
<td>Mobile</td>
</tr>
<tr>
<td>007</td>
<td>Name</td>
<td>28</td>
<td>女</td>
<td>Mobile</td>
</tr>
<tr>
<td>008</td>
<td>Name</td>
<td>28</td>
<td>男</td>
<td>Mobile</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">【table，thead，tbody，tfoot】 colspan：合并行， rowspan：合并列 </td>
</tr>
</tfoot>
</table>
</section>
</body>
</html>[推奨学習: html ビデオ チュートリアル]
以上がHTMLでテーブルのヘッダーを動かさないようにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。