I'd like to add a horizontal scroll to a bootstrap responsive table. I use bootstrap and asp.net to build my website so it works with all mobile devices. Currently it is set up in a way that the user scrolls all the way to the bottom of the page and use the horizontal scroll, then scroll back up again (not good design). I think that's how bootstrap table-responsive is set up. I'd like to have it set up so the scroll is always visible and users don't have to scrolls all the way to the bottom of the page to use the horizontal scroll.
Here is my asp.net gridview code:
<div class="container" >
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CssClass="table table-responsive" AlternatingRowStyle-CssClass="even" >
<Columns>
<asp:BoundField DataField="ColumnA" HeaderText="Pub/Form Status" SortExpression="ColumnA" />
<asp:BoundField DataField="ColumnB" HeaderText="Pub/Form Number" ItemStyle-wrap="false" SortExpression="ColumnB" />
<asp:BoundField DataField="ColumnC" HeaderText="Pub/Form Date" SortExpression="ColumnC" />
<asp:BoundField DataField="ColumnD" HeaderText="Pub/Form Title" SortExpression="ColumnD" />
<asp:BoundField DataField="ColumnE" HeaderText="PROPONENT" SortExpression="ColumnE" HtmlEncode="False" />
<asp:BoundField DataField="UColumnF" HeaderText="Unit Of Issue" SortExpression="ColumnF" HtmlEncode="False" />
</Columns>
</asp:GridView>
</div>
In the aspx.cs
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
Thanks so much.