时间戳

首页 > 解决方案 > 带有垂直滚动条但带有固定标题的 HTML+CSS 表格

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

问题描述

我正在制作一个网站，其中有一些包含大量数据的表格。因此，我决定在表格中使用滚动条，这部分工作。但是现在我希望标题所在的标题保持可见并且不会消失。

这就是我目前所拥有的： HTML+CSS+Result 问题是如何将标题位置设置为固定的，这样即使您向下滚动标题也能保持可见，而正文消失。

问候，

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; 
}

标签： htmlcssheader

解决方案

你的table身体结构不正确。看看这里。

对于粘性，您需要为 selector 添加这些规则.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>

推荐阅读