Question

我目前有一个可以水平和垂直滚动的表格。但是，我希望在向上和向下滚动时在屏幕顶部显示标题。

我尝试了一些方法试图让标题保持静态，但没有用。

我遇到的问题是桌子左右滚动我也无法让标题保持静止，因为当左右滚动时我需要它移动。

我附上了一个jsfiddle作为该表的一个例子。

html文件

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="results">
<div class="results_table">
  <table>
    <thead>
    <tr>
        <th>COL1</th>
        <th>COL2</th>
        <th>COL3</th>
        <th>COL4</th>
        <th>COL5</th>
       <th>COL6</th>
        <th>COL7</th>
        <th>COL8</th>
       <th>COL9</th>
        <th>COL10</th>


    </tr>
   </thead>

   <tbody>
   <tr>

   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>


   </tr>

   <tr>

   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>


   </tr>

   <tr>

   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>


   </tr>

   <tr>

   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>
   <td> TEST </td>


   </tr>
   </tbody>

   </table>
  </div>
  </div>
  </body>
</html>

css文件

body{
    font-family:arial;
    margin:0;
    border-top:2px solid black;
    padding-bottom:30px;
    padding-left:10px;
    padding-right:10px;
    background-color:#F9F9F9;
}

/* Results table container */
.results{

    padding:20px;
    border-radius: 5px;
    -webkit-box-shadow: -1px 10px 58px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: -1px 10px 58px 0px rgba(0,0,0,0.75);
    box-shadow: -1px 10px 58px 0px rgba(0,0,0,0.75);
    padding-left:50px;
    padding-right:50px;
    width:600px;
    height:200px;

}

.results_table{
    overflow:auto;
    border-radius:5px;
    height:200px;


}

 table {

    border-collapse: collapse;
    font-size:12px;
    text-align:center;
    width:100%;
    table-layout:fixed;

}

.results_table td {
    padding-top:30px;
    padding-bottom:30px;
    padding-right:10px;
    padding-left:10px;
    border-bottom:1px solid black;

}

.results_table th {
    background:#1267B2;
    color:#fff;
    height:70px;
    width:100px;
    border-bottom:2px solid rgba(215,215,215,1.00);
    text-shadow: 1px 1px 3px #666666;
    padding:10px;


}

.results_table tbody tr:nth-child(odd) {
   background-color: #E7E7E7;
}

https://jsfiddle.net/afmhppoj/1/

非常感谢

Answer 1

我已更新了您的JSFiddle JSfiddle

请彻底了解。

对于您想要的效果，您可以使用flotThead

并相应地进行自定义。

Answer 2

我有解决方案，但我们不能在x轴上滚动。标题将固定，它不会移动x轴或y轴。

让我知道它是否适合你。

向上和向下滚动时使表头可见

2 个答案: