How to configure Gridview control so that the Header text are not connect and have certain padding between them

I'm not sure you have any control over the padding in the column headers. However, there are several design view options for AutoSizeColumnMode. Try changing those to see if those better suit you needs. Several of those settings will auto-size based on Header text.

I don't see where is this AutoSizeColumnMode property that I can set.  Can you give me steps on how to locate this?  What design view do you mean?  I check both in Source and Design of the aspx page but can't find this property.  Thank you.

The ASP.NET GridView control has different style properties (ControlStyle, FooterStyle, HeaderStyle, ItemStyle).  There are a lot of examples of how to apply style.  You can mix styles with CSS styling to achieve the effect that you require.

GridView Examples for ASP.NET 2.0: Formatting the GridView
https://msdn.microsoft.com/en-us/library/aa479342.aspx

  <asp:GridView ID="productGridView" Runat="server" 
          DataSourceID="productsDataSource"
            DataKeyNames="ProductID" AutoGenerateColumns="False" 
             BorderWidth="1px" BackColor="#DEBA84" 
             CellPadding="3" CellSpacing="2" BorderStyle="None" 
             BorderColor="#DEBA84">
            <FooterStyle ForeColor="#8C4510" 
              BackColor="#F7DFB5"></FooterStyle>
            <PagerStyle ForeColor="#8C4510" 
              HorizontalAlign="Center"></PagerStyle>
            <HeaderStyle ForeColor="White" Font-Bold="True" 
              BackColor="#A55129"></HeaderStyle>

...

Select allOpen in new window

I played with Gridview control's cellspacing and it didn't seem to make a bit of diffference.  I also played with in Edit Column (Design) of headerStyle and ItemStyle and it looks fine in the Gridview control's Design view but when the application running it's nothing like it!
I would set all column Headerstyle to be center Horizontally but at run time they all aligned to the left.  
Also, why is each column 2,3 times the width in Edit Mode than in display mode?  The gridview control would expand over to the <div> width that contains it.  How to fix this?  
Thank you.

Did you try setting the CellPadding property?

Can you show me how the style is applied for the GridView in the HTML?

Bob,
I attached the grid's html code and the screen capture of what it looks like in VS Design view.  Thank you for the help.
grid-dessign-view.png
grid.txt

I'm attaching the column headers in Normal mode and in Edit mode.  You see the columns suddenly expanded their width to more than double of their width in normal mode.  The right most column, half of it has grey background because in edit mode it leaks over the div that contains it so there is a horizontal scrolling bar to get to it.  Very frustrating!
Grid-Normal-mode.png
grid-Edit-Mode.png

I would like around 15 or 20 pixels between each column.  This should be the same in Edit or Normal mode.  
Also, any way to set the cell will grow, or is that the default, if the data has one that's is longer than others?

Thank you.

Bob, I played wiht the cellspacing settting it from 10 to 150 makes no difference in the spacing between the columns.  The cellPadding does make a difference but it also increase the Header row height and oddly enough not the cells below that row.  Anyway, cellspacing is not working and cellpadding is changing the height.   Also, in Edit it still grows ouside of the screen.

yes, agree.  Have to use CSS for this to work correctly.  Thank you.

P.S. I am stuck in the ASP.NET MVC 5 world so much that I had to think about this, but I always try to apply CSS for styles.