asp.net - 固定行ヘッダーとスクロール機能を備えたページの設計

Question

私は設計に慣れていません。上部に固定行ヘッダーを持つテーブルを設計する方法を教えてください。固定ヘッダーでスクロールすることで、関連する列の下のデータを表示できるはずです。テーブルまたはdivを使用してください。

Answer 1

このデモはあなたが必要とするものですか?

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