使用固定標題和滾動功能設計一個頁面

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>