我需要一个带有可滚动主体的固定表头。我已经尝试了一切，但似乎不起作用

Question

<!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>

/////// Here is my CSS /////// 这是我的 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;
}

Answer 1

If you set the display properties of thead and tbody to "inline-block" you get scrolling.如果您将 thead 和 tbody 的显示属性设置为“inline-block”，您将得到滚动。 May not be exactly what you need but you'll have to tweek it.可能不是您所需要的，但您必须对其进行调整。

Also you have to wrap the table in a container div so the elements don't "fall out"此外，您必须将表格包装在容器 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/ https://jsfiddle.net/m12x44mo/1/

我需要一个带有可滚动主体的固定表头。我已经尝试了一切，但似乎不起作用

问题描述

1 个解决方案

解决方案1
-1 2016-04-05 22:12:02

我需要一个带有可滚动主体的固定表头。 我已经尝试了一切，但似乎不起作用

问题描述

1 个解决方案

解决方案1 -1 2016-04-05 22:12:02

我需要一个带有可滚动主体的固定表头。我已经尝试了一切，但似乎不起作用

解决方案1
-1 2016-04-05 22:12:02