Question

我有下表，第一行是标题：

<table>
    <tr>
        <th>check1</th>
        <th>check2</th>
        <th>check3</th>
        <th>check4</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <!--...-->
</table>

JSFiddle：http://jsfiddle.net/njde3c8a/

它没有任何thead但是如何在滚动时使标题粘住。

以下是我对@ mtwallet的回答：

enter image description here

我必须将fixedHeader宽度设置为98.2%，以确保它不会与滚动条重叠。我想使宽度与tbody中的行尽可能接近。有没有办法按百分比而不是像素来获得它？

GridView：

<asp:Table ID="ResultsTable" runat="server" ClientIDMode="Static" Visible="false" Width="70%">
    <asp:TableRow>
        <asp:TableCell width="100%">
            <div id="GridPanel" style="height:350px;width:100%;overflow-y:scroll;">
                <div>
            <%--<asp:Panel ID="GridPanel" Width="100%" runat="server" ScrollBars="Vertical" Height="300px">--%>
                 <asp:GridView ID="BookingResults" ClientIDMode="Static" runat="server" EnableModelValidation="True" AutoGenerateColumns="False" AllowSorting="true" ForeColor="Black" Width="100%" HeaderStyle-CssClass="header"> <%--OnRowCommand="BookingResults_RowCommand"--%> 
                    <Columns>
                        <asp:TemplateField>
                            <HeaderTemplate>
                                <asp:Label runat="server" ID="commHdr" Text="Show Guideline" CssClass="sg" />
                            </HeaderTemplate>
                            <ItemTemplate>
                                <asp:LinkButton runat="server" ID="btnShow3" CssClass="btnSearch3" Text="VIEW" OnClientClick="javascript:test(this);return false;"></asp:LinkButton>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:BoundField DataField="ID" HeaderText="ID" ItemStyle-VerticalAlign="Top" />
                        <asp:BoundField DataField="Topic" HeaderText="Topic" ItemStyle-VerticalAlign="Top" ItemStyle-CssClass="tTitle"  />
                        <asp:BoundField DataField="Location" HeaderText="Location" ItemStyle-VerticalAlign="Top" />
                        <asp:BoundField DataField="Specialty" HeaderText="Specialty" ItemStyle-VerticalAlign="Top" />
                        <asp:TemplateField HeaderText="Provider Name">
                             <ItemTemplate>
                                  <div id="dvHide" class="clsHide">
                                       <asp:Label ID="lblEllipsis" runat="server" Text='<%#Eval("Provider") %>' ToolTip='<%#Eval("Provider") %>'></asp:Label>
                                  </div>
                              </ItemTemplate>
                         </asp:TemplateField>
                        <asp:TemplateField HeaderText="Summary" ItemStyle-VerticalAlign="Top" ItemStyle-CssClass="sumM">
                            <EditItemTemplate>
                                <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Summary") %>'></asp:TextBox>
                            </EditItemTemplate>
                            <ItemTemplate>
                                <asp:Label ID="Label1" runat="server" Text='<%# Bind("Summary") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:BoundField DataField="Guideline" HeaderText="Guideline" ItemStyle-CssClass="gLine" HeaderStyle-CssClass="gLine" />
                    </Columns>
                 </asp:GridView>
                </div>
            </div>
            <%--</asp:Panel>--%>
        </asp:TableCell>
    </asp:TableRow>
</asp:Table>

Answer 1

OP的HTML（部分）

<table id="ResultsTable">
<tr>
    <td style="width:100%;"><div id="GridPanel" style="height:300px;width:100%;overflow-y:scroll;">

    <table id="ctl00_ctl33_g_bae61ba3_d1d6_49b5_8dca_f2de96b61f3d_gridHeader"></table>

     <div>
         <table id="BookingResults">
            <thead>
                <tr class="header">
                    <th scope="col">
                        <span id="commHdr" class="sg">Show Guideline</span>
                    </th>
                    <th scope="col">Topic</th>
                    <th scope="col">Location</th>
                    <th scope="col">Specialty</th>
                    <th scope="col">Provider Name</th>
                    <th scope="col">Summary</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <a onclick="javascript:test(this);return false;" id="btnShow3" class="btnSearch3" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ctl33$g_bae61ba3_d1d6_49b5_8dca_f2de96b61f3d$BookingResults$ctl02$btnShow3&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, true))">VIEW</a>
                    </td>
                    <td class="tTitle" valign="top">
                        topic
                    </td>

JS

//Get the first tr
var firstRow = $('.header');

//Clone the first row
firstRow.clone().attr('class','fixedHeader').prependTo('#ResultsTable');

//Match the th widths of the cloned tr
//This can be done with just css if you like
firstRow.find('th').each(function(i) {
    var thWidth = $(this).width();

    $('.fixedHeader th').eq(i).css({
        width: thWidth   
    });
});

CSS

#ResultsTable {
    position: relative;
}

.fixedHeader {
    position: absolute;
    top: 3px;
    left: 3px;
    background: white; 
}

的jsfiddle

以下是完整解决方案和原始标记http://jsfiddle.net/mt89bevk/45/

的链接

如何在没有GridView生成的thead的情况下滚动时将表头设置为固定

1 个答案: