Bootstrap 3 horizontal scrollbar for responsive griview in asp.net

Question

I'm using Bootstrap to display a responsive gridview table(many columns) in asp.net. The table can be very large depending on the parameters that are used to populate the dataset for the table. If a large table is displayed, users will have to scroll all the way to the bottom of the screen in order to use the horizontal scrollbar. Is there a way to make the horizontal scrollbar always visible and allow users to use the horizontal scrollbar without having to scroll all the way to the bottom of the page?

Below is a sample, I didn't include all of the columns.

    <div id="divEmployee" style="overflow: scroll;" runat="server">
                        <div class="table-responsive;text-center; ">
                            <asp:GridView ID="EmployeeGrid" runat="server" Width="100%" AutoGenerateColumns="False"
                                UseAccessibleHeader="true"  CssClass="table table-striped table-hover table-condensed "
                                AllowSorting="True"  >
                                <Columns>
                                    <asp:BoundField DataField="FirstName" HeaderText="First Name" SortExpression="FirstName" />
                                    <asp:BoundField DataField="LastName" HeaderText="Last Name" SortExpression="LastName" />
                                    <asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" />
                                    <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
                                    <asp:BoundField DataField="State" HeaderText="State" SortExpression="State" />
                                </Columns>`enter code here`

                            </asp:GridView>
                        </div>
                    </div>

Answer 1

Hi @fp2021 ,
As far as I think,you need to set a height. Just like this:

style="height: 200px; overflow-x: scroll;"  

Code in behind:

 EmployeeGrid.HeaderRow.TableSection = TableRowSection.TableHeader;  

More details,you could refer to below article:
https://www.aspforums.net/Threads/125094/Add-Horizontal-scrollbar-to-Bootstrap-responsive-GridView-in-ASPNet/
Best regards,
Yijing Sun

---

If the answer is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our  documentation  to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Use a control repeater