带有垂直滚动条但带有固定标题的HTML+CSS表格

Question

我正在制作一个网站，在那里我有很多包含大量数据的表。因此，我决定在表格中使用滚动条，这一部分很有效。但现在我希望标题所在的标题保持可见，不要消失。

到目前为止，我已经做到了：HTML+CSS+结果问题是，我如何将标题位置设置为固定，这样即使向下滚动，标题也能在正文消失时保持可见。

问候，

Html代码

<div class="tableFixHead">
<table width="95%">
<thead>
<tr>
<th><h1>LOG</h1>
<br>
<h2>datum tijd actuator waarde</h2> </th>
</tr>
</thead>
<tbody>
<tr>
<th scope= "col"><h1> <pre>{{ content }}</pre>  </h1>
</tr>
</tbody>
</table>
</div>

css

.tableFixHead { 
overflow-y: auto;
overflow-x: hidden;
max-height: 600px; 
} 
.tableFixHead table thead tr th { 
position: sticky; 
top: 0;
} 
table { 
border-collapse: collapse; 
}

Answer 1

您的table主体结构不正确。看看这里。

对于粘性，您需要为选择器.tableFixHead table thead tr th:添加以下规则

.tableFixHead table thead tr th { 
position: sticky; 
top: 0;
} 

此外，您的.mystyle类没有在您的示例中使用。也许这只是在这个问题的框架内。

此外，请注意：

<table width = "90%";>

删除值后面的;字符，或将其放在引号中。如下：

<table width = "90%;">

.mystyle { 
background-color: coral; 
color: white; 
box-sizing: border-box; 
} 
.tableFixHead { 
overflow-y: auto;
overflow-x: hidden;
max-height: 600px; 
} 
.tableFixHead table thead tr th { 
position: sticky; 
top: 0;
} 
table { 
border-collapse: collapse; 
}

<div class="tableFixHead">
<table width="90%">
<thead>
<tr>
<th>Active recipe 1</th>
<th>Active recipe 2</th>
<th>Active recipe 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
<tr>
<td>actuator </td>
<td>Waarde </td>
<td>eenheid </td>
</tr>   
</tbody>
</table>    
</div>