asp.net - 设计具有固定行标题和滚动功能的页面

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>