How to apply the same style for gridview on clicking buttons

Question

Below is the main css that is getting applied only for the first time if i click edit the my gridview css is getting changed as shown below[my grid is getting changed in this way][1] but my actual grid should be in this way[enter image description here][2]

.mydatagrid
{
width: 100%;
border: solid 2px black;
min-width: 80%;
}


[1]: https://i.stack.imgur.com/qhINw.png
[2]: https://i.stack.imgur.com/ENMyW.png

Though i am calling my my css that is mydatagrid in my gridview but still the css is getting changed.Below is the new css and gridview code



<style type="text/css">
.error {
background-color: #d9534f;
font-weight: 300;
font-size: 12px;
padding: 3px 6px 3px 6px;
color: #fff;
text-align: center;
white-space: nowrap;
}

.auto-style1 {
height: 100%;
width: 900px;
}

.auto-style2 {
}

.auto-style4 {
width: 218px;
}

.auto-style5 {
width: 289px;
}

.auto-style6 {
}

.auto-style8 {
width: 165px;
}

.auto-style9 {
width: 171px;
}

.auto-style10 {
height: 3px;
}

.dataTables_paginate {
display: inline-block;
min-width: 0.5em;
padding: 0.1em 0.1em;
margin-left: 2px;
text-align: center;
text-decoration: underline !important;
cursor: pointer;
cursor: hand;
border: 1px solid transparent;
}

.dataTables_wrapper .dataTables_paginate {
float: left;
text-align: right;
padding-top: 0.25em;
}

.dataTables_filter {
float: right;
text-decoration: solid;
}

a.paginate_button,
a.paginate_active {
display: inline-block;
text-decoration: underline !important;
padding: 0px 0.8px;
margin-left: 2px;
cursor: pointer;
*cursor: hand;
color: blue;
}

a.paginate_active {
background-color: transparent;
border: 1px solid black;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
background-repeat: no-repeat;
background-position: center right;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate {
color: black !important;
text-decoration: none !important;
}
</style>

<tr>
<td colspan="9">
<asp:GridView ID="GridView1" runat="server" Width="100%" CssClass="mydatagrid" HeaderStyle-CssClass="header" RowStyle-CssClass="rows" AutoGenerateColumns="false"
EmptyDataText="No files uploaded" OnRowCommand="GridView1_RowCommand" OnRowDataBound="GridView1_RowDataBound" OnPageIndexChanging="GridView1_PageIndexChanging">
<%--AllowPaging="true" OnPageIndexChanging="GridView1_PageIndexChanging" PageSize="10">--%>
<Columns>
<asp:TemplateField HeaderText="S.No." Visible="false">
<ItemTemplate>
<asp:Label ID="lblID" runat="server" Text='<%#Bind("ID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText=" ">
<ItemTemplate>
<asp:Button ID="Btn1" runat="server" Text="Edit" CommandName="mybutton" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText=" ">
<ItemTemplate>
<asp:Button ID="Btn2" runat="server" Text="Delete" CommandName="mybutton2" OnClientClick="return confirm('Are you sure you want to Delete Record?');" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Module" Visible="true">
<ItemTemplate>
<asp:Label ID="lblModname" runat="server" Text='<%#Bind("modulename") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Speciality" Visible="true">
<ItemTemplate>
<asp:Label ID="lblSubject" runat="server" Text='<%#Bind("Subject") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="AuditoName" HeaderText="Audio Name" />

<asp:BoundField DataField="AuditoType" HeaderText="Type" />
<asp:BoundField DataField="Physician" HeaderText="Physician Name" />
<asp:TemplateField HeaderText="SItm.ModuleID" Visible="false">
<ItemTemplate>
<asp:Label ID="lblModuleID" runat="server" Text='<%#Bind("ModuleID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>

</Columns>
</asp:GridView>
</td>
</tr>

Below is the main css that is getting applied only for the first time if i click edit the my gridview css ig getting changed as shown below

.mydatagrid
{
width: 100%;
border: solid 2px black;
min-width: 80%;
}



How to apply the same style for gridview on clicking buttons in gridview