Twitter Bootstrap and ASP.NET GridView Twitter Bootstrap and ASP.NET GridView asp.net asp.net

Twitter Bootstrap and ASP.NET GridView


You need to set useaccessibleheader attribute of the gridview to true and also then also specify a TableSection to be a header after calling the DataBind() method on you GridView object. So if your grid view is mygv

mygv.UseAccessibleHeader = Truemygv.HeaderRow.TableSection = TableRowSection.TableHeader

This should result in a proper formatted grid with thead and tbody tags


There are 2 steps to resolve this:

  1. Add UseAccessibleHeader="true" to Gridview tag:

    <asp:GridView ID="MyGridView" runat="server" UseAccessibleHeader="true">
  2. Add the following Code to the PreRender event:

Protected Sub MyGridView_PreRender(sender As Object, e As EventArgs) Handles MyGridView.PreRender    Try        MyGridView.HeaderRow.TableSection = TableRowSection.TableHeader    Catch ex As Exception    End TryEnd Sub

Note setting Header Row in DataBound() works only when the object is databound, any other postback that doesn't databind the gridview will result in the gridview header row style reverting to a standard row again. PreRender works everytime, just make sure you have an error catch for when the gridview is empty.


Just for the record, I got borders in the table and to get rid of it I needed to set following properties in the GridView:

GridLines="None"CellSpacing="-1"