1

下にスクロールするときにテーブルのヘッダーを修正する必要があります。レコードの最後まで列ヘッダーを表示したいです。これを作成しましたが、問題に直面しています。動的データであるデータベースからデータをフェッチするので、それをテーブルに表示するとレイアウトが奇妙になります。テーブルのセル幅をパーセンテージで言及している間に幅が変わる1000語を超える列がある場合。ヘッダーが一番上に残り、データが何であれレイアウトが乱れないというこの問題をどのように解決できますか。jQueryを使いたくない

.gridScrollDiv
{
border:1px solid #CCCCCC;
height: 500px;
overflow: scroll;
overflow-x: hidden;
}

<div class="gridScrollDiv">
    <table id="tblData" class="grid" style="width: 100%;" cellpadding="0">
        <thead style="position:absolute;">
            <tr>
                <th style="width:40%;">
                    Code
                </th>
                <th style="width:40%;">
                    Description
                </th>
                <th style="width:20%;">
                    Date
                </th>
            </tr>
        </thead>
        <tbody>
            <asp:Repeater ID="rptLoation" runat="server">
                <ItemTemplate>
                    <tr>
                        <td style="width:40%; word-wrap:breake-word;">
                            <%# DataBinder.Eval(Container.DataItem, "Code")%>
                        </td>
                        <td style="width:40%; word-wrap:breake-word;">
                            <%# DataBinder.Eval(Container.DataItem, "Description")%>
                        </td>
                        <td style="width:20%; word-wrap:breake-word;">
                            <%# DataBinder.Eval(Container.DataItem, "RegistrationDate")%>
                        </td>
                    </tr>
                </ItemTemplate>
            </asp:Repeater>
        </tbody>
    </table>
</div>
4

1 に答える 1

0

以下のようなコードを使用できます。cssを修正しました。

.gridScrollDiv
    {
        border: 1px solid #CCCCCC;
        height: 500px;
        overflow-y: scroll;
    }

リピーターからヘッダーを取り出します。

<table style="width: 100%;">
    <tr style="font-weight: bold;">
        <tr>
            <td style="width: 40%; text-align: left">
                Code
            </td>
            <td style="width: 40%; text-align: left">
                Description
            </td>
            <td style="width: 20%; text-align: left">
                Date
            </td>
        </tr>
</table>
<div class="gridScrollDiv">
    <asp:Repeater ID="rptLoation" runat="server">
        <HeaderTemplate>
            <table style="width: 100%;">
        </HeaderTemplate>
        <ItemTemplate>
            <tr>
                <td style="width: 40%; word-wrap: breake-word;">
                   <div style="width: 350px; overflow-x: scroll;"> 
                   <%# DataBinder.Eval(Container.DataItem, "Code")%>
                   </div>
                </td>
                <td style="width: 40%; word-wrap: breake-word;">
                     <div style="width: 350px; overflow-x: scroll;">
                    <%# DataBinder.Eval(Container.DataItem, "Description")%>
                    </div>
                </td>
                <td style="width: 20%; word-wrap: breake-word;">
                    <div style="width: 350px; overflow-x: scroll;">
                    <%# DataBinder.Eval(Container.DataItem, "RegistrationDate")%>
                    </div>

                </td>
            </tr>
        </ItemTemplate>
        <FooterTemplate>
            </table>
        </FooterTemplate>
    </asp:Repeater>
</div>

これはあなたの目的を解決するかもしれません....

于 2012-04-09T13:52:29.330 に答える