我需要一个带有可滚动正文的固定表头.我已经尝试了所有方法，但它似乎不起作用

I need a fixed table header with a scrollable body. I have tried everything but it won't seem to work

本文关键字：有方法 不起作用 表头 一个 正文 滚动      更新时间：2024-01-08
<!DOCTYPE html>
<html>
<link href="../../../CSS/StatePage.css" rel="stylesheet" type="text/css">
<script src="sorttable.js"></script>
<header>
<h1>
<a href="../../OpenPage.html"> <img src="../../logo.jpg" alt="logo" width="30" height="30"/></a>Title</h1>
<h6>small header</h6>   
</header>
<br> <br>
<br> <br>
<br>
<div>
<table id="states"
       align="center"
       class="sortable"
>
<thead>
    <tr>    
        <th><h4>Table title 1</h4></th>
        <th><h4>Table title 2</h4></th>
        <th><h4>Table title 3</h4></th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Name</td>
        <td>Name</td>
        <td>Date</td>
    </tr>
    <tr>
        <td>Name</td>
        <td>Name</td>
        <td>Date</td>
    </tr>
    <tr>
        <td>Name</td>
        <td>Name</td>
        <td>Date</td>
    </tr>
    <tr>
        <td>Name</td>
        <td>Name</td>
        <td>Date</td>
    </tr>
<tr>
        <td>Name</td>
        <td>Name</td>
        <td>Date</td>
    </tr>
    <tr>
        <td>Name</td>
        <td>Name</td>
        <td>Date</td>
    </tr>
    <tr>
        <td>Name</td>
        <td>Name</td>
        <td>Date</td>
    </tr>
    <tr>
        <td>Name</td>
        <td>Name</td>
        <td>Date</td>
    </tr>
</tbody>
</table>
</div>

<footer>
<h2> Footer Name </h2>
</footer>
</html>
/////

//这是我的 CSS

h1, h2, h6 { 
font-family: Helvetica;
text-align: center;
}
header {
background-color: #FFFFFF;
position: fixed;
width: 100%;
top: 0px;
border-bottom: solid;
height: 99px;
}
tr, td {
padding: 5px;
}
table {
margin-top: 5px;
}
/* Sortable tables */
table.sortable thead {
    background-color: #eee;
    color: #E5855F;
    cursor: default;
}

tr:nth-child(even) {
background-color: #FFC792;
}
thead {
font-family: Helvetica;
text-align: left;
}
tbody {
overflow: auto;
}
a:link {
color: black; 
}
footer {
background-color: #FFFFFF;
position: fixed;
width: 100%;
top: auto;
bottom: 0px;
border-top: solid;
}
如果将

thead 和 tbody 的显示属性设置为"内联块"，则会滚动。可能不是你所需要的，但你必须把它弄成一周。

此外，您还必须将表包装在容器div 中，这样元素就不会"掉出来">

thead {
  width: 290px;
  display: inline-block;
}
tbody {
  width: 290px;
display: inline-block;
height: 70px;
overflow-y: scroll;
}
table {
margin-top: 5px;
}
tbody {
  overflow-y: scroll;
}

#table-cont {

  width: 290px;
}

https://jsfiddle.net/m12x44mo/1/

相关文章：