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>
Overwrite the table-responsive css
.table-responsive{
overflow-x: auto !important;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With