使用固定标题和滚动功能设计一个页面

Question

我是设计新手，任何人都可以请我建议我如何设计一个顶部具有固定行标题的表格，并且应该能够通过滚动固定条目来查看相关列下的数据请使用表格或div。

Answer 1

是这样的DEMO你需要什么？

<div style="margin: 0; padding: 0; border-collapse: collapse; width: 519px; height: 100px; overflow: hidden; border: 1px solid black;"> 
    <table style="margin: 0; padding: 0; border-collapse: collapse; color: White; width: 517px; height: 20px; text-align: left; background-color: Blue;"> 
    <colgroup> 
    <col width="200px"/> 
    <col width="150px"/> 
    <col width="150px"/> 
    <col width="16px"/> 
    </colgroup> 
    <tbody> 
    <tr style="margin: 0; padding: 0; border-collapse: collapse;"> 
    <th style="margin: 0; padding: 0; border-collapse: collapse;"> 
    Column 1 
    </th> 
    <th style="margin: 0; padding: 0; border-collapse: collapse;"> 
    Column 2 
    </th> 
    <th style="margin: 0; padding: 0; border-collapse: collapse;"> 
    Column 3 
    </th> 
    <th style="margin: 0; padding: 0; border-collapse: collapse;"> 

    </th> 
    </tr> 
    </tbody> 
    </table> 
    <div style="margin: 0; padding: 0; border-collapse: collapse; width: 517px; height:77px; overflow: auto;" 
    > 
    <table style="margin: 0; padding: 0; border-collapse: collapse; width: 500px;"> 
    <colgroup> 
    <col width="200px"/> 
    <col width="150px"/> 
    <col width="150px"/> 
    </colgroup> 
    <tbody style="margin: 0; padding: 0; border-collapse: collapse;"> 
    <tr style="margin: 0; padding: 0; border-collapse: collapse;"> 
    <td style="border: 1px solid lightgrey;"> 
    Row A-1 
    </td> 
    <td style="border: 1px solid lightgrey;"> 
    Row A-2 
    </td> 
    <td style="border: 1px solid lightgrey;"> 
    Row A-3 
    </td> 
    </tr> 
    <tr style="margin: 0; padding: 0; border-collapse: collapse;"> 
    <td style="border: 1px solid lightgrey;"> 
    Row B-1 
    </td> 
    <td style="border: 1px solid lightgrey;"> 
    Row B-2 
    </td> 
    <td style="border: 1px solid lightgrey;"> 
    Row B-3 
    </td> 
    </tr> 
    <tr style="margin: 0; padding: 0; border-collapse: collapse;"> 
    <td style="border: 1px solid lightgrey;"> 
    Row C-1 
    </td> 
    <td style="border: 1px solid lightgrey;"> 
    Row C-2 
    </td> 
    <td style="border: 1px solid lightgrey;"> 
    Row C-3 
    </td> 
    </tr> 
    <tr style="margin: 0; padding: 0; border-collapse: collapse;"> 
    <td style="border: 1px solid lightgrey;" 
    > 
    Row D-1 
    </td> 
    <td style="border: 1px solid lightgrey;"> 
    Row D-2 
    </td> 
    <td style="border: 1px solid lightgrey;"> 
    Row D-3 
    </td> 
    </tr> 
    <tr style="margin: 0; padding: 0; border-collapse: collapse;"> 
    <td style="border: 1px solid lightgrey;"> 
    Row E-1 
    </td> 
    <td style="border: 1px solid lightgrey;"> 
    Row E-2 
    </td> 
    <td style="border: 1px solid lightgrey;"> 
    Row E-3 
    </td> 
    </tr> 
    <tr style="margin: 0; padding: 0; border-collapse: collapse;"> 
    <td style="border: 1px solid lightgrey;"> 
    Row F-1 
    </td> 
    <td style="border: 1px solid lightgrey;"> 
    Row F-2 
    </td> 
    <td style="border: 1px solid lightgrey;"> 
    Row F-3 
    </td> 
    </tr> 
    <tr style="margin: 0; padding: 0; border-collapse: collapse;"> 
    <td style="border: 1px solid lightgrey;"> 
    Row G-1 
    </td> 
    <td style="border: 1px solid lightgrey;"> 
    Row G-2 
    </td> 
    <td style="border: 1px solid lightgrey;"> 
    Row G-3 
    </td> 
    </tr> 
    </tbody> 
    </table> 
    </div> 
    </div>