Heim > Artikel > Web-Frontend > So verhindern Sie, dass sich der Tabellenkopf in HTML verschiebt
So verhindern Sie, dass sich der Tabellenkopf in HTML verschiebt
- 藏色散人Original
- 2021-06-03 11:05:063867Durchsuche
So erreichen Sie einen festen Tabellenkopf in HTML: Steuern Sie zunächst den Bereich, in dem der Inhalt gescrollt werden soll, und fügen Sie dann den Stil „overflow-y: auto;“ hinzu ;" zum tr-Tag, d. h. Der Zählerkopf kann fixiert werden.
Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.
HTML-Tabelle mit festem Kopfteil und Bildlaufleiste Beim Scrollen wird standardmäßig die Tabellenüberschrift zusammen mit dem Tabelleninhalt gescrollt, was dazu führt, dass die Feldnamen, die der Überschrift entsprechen, nicht sichtbar sind, was sich negativ auf das Erlebnis auswirkt!
Implementierungsidee:
Fügen Sie den Stil „overflow-y: auto;“ zum Tag „tbody“ hinzu und fügen Sie den Stil „table-layout:fixed;“ hinzu Da tbody Mit der Bildlaufleiste muss auch die Bildlaufleiste Platz beanspruchen, was dazu führt, dass tbody und thehead falsch ausgerichtet sind. Daher muss beim Festlegen der Breite des tbody auch die Breite der Bildlaufleiste berücksichtigt werden hinzugefügt werden. [Wenn Sie die Bildlaufleiste nicht anzeigen möchten, können Sie die Breite der Bildlaufleiste auf 0 Pixel setzen und die Bildlaufleiste ist weg.Das Folgende ist das Rendering, und der spezifische vollständige Beispielcode ist ebenfalls unten:
Vollständiger Beispielcode: 
<!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> [Empfohlenes Lernen: HTML-Video-Tutorial
]Das obige ist der detaillierte Inhalt vonSo verhindern Sie, dass sich der Tabellenkopf in HTML verschiebt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!