Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap responsive table horizontal scroll always visible

I'm using responsive bootstrap tables in a .net web application to display information. Whenever a large amount of information is returned, the horizontal scroll bar appears at the bottom of the page. As a result, the user has to scroll to the bottom in order to access the horizontal scroll bar to view information that is not currently being displayed on the screen. I would like to force the horizontal scroll bar to be visible at all times. I tried to add "Position:absolute" to the table div tag but it seems to interfere with the responsive formatting. Is there any way to always display a horizontal scrollbar when using responsive tables?

<div id="divGridResults" style="overflow-x: scroll;" runat="server">
        <div class="table-responsive;text-center; ">
            <asp:GridView ID="gvEmployee" runat="server" Width="100%" AutoGenerateColumns="False"
                ClientIDMode="Static" CssClass="table table-striped table-hover table-condensed "
                AllowSorting="True" PagerStyle-CssClass="bs-pagination">
                <Columns>
                    <asp:BoundField DataField="Emp_ID" HeaderText="ID" SortExpression="EMP_ID" />                  
                    <asp:BoundField DataField="First_Name" HeaderText="First Name" SortExpression="First_Name" />
                    <asp:BoundField DataField="Last_Name" HeaderText="Last Name" SortExpression="Last_Name" />
                    <asp:BoundField DataField="Manager" HeaderText="Manager" SortExpression="Manager" />
                    <asp:BoundField DataField="Status" HeaderText="Status" SortExpression="Status" />
                    <asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" />
                    <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
                    <asp:BoundField DataField="State" HeaderText="State" SortExpression="State" />
                    <asp:BoundField DataField="Zip" HeaderText="Zip" SortExpression="Zip" />
                    <asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone" />
                    <asp:BoundField DataField="Dept" HeaderText="Department" SortExpression="Dept" />
                </Columns>
                <PagerSettings NextPageText="Next" PreviousPageText="Back" Mode="NumericFirstLast    " />
                <PagerStyle CssClass="bs-pagination" />
            </asp:GridView>
        </div>
    </div>
like image 281
Mr Miyagi Avatar asked Nov 18 '22 11:11

Mr Miyagi


1 Answers

Overwrite the table-responsive css

.table-responsive{
    overflow-x: auto !important;
}
like image 174
Subin Avatar answered Dec 09 '22 17:12

Subin