如何在GridView中控制列宽？

Question

How can I make the GridView auto-resize the width of each column or fix the width of each column in Default.aspx? The problem I'm having is that some columns are too wide and that others are too narrow (data go to the next line).

<div class="divNext">
    <asp:ScriptManagerProxy ID="DisplayResultsScriptManager" runat="server">
    </asp:ScriptManagerProxy>
    <asp:UpdatePanel ID="DisplayResultsUpdatePanel" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <div>
                <asp:GridView ID="GridViewX" RowStyle-Wrap="false" AllowSorting="true"
                    GridLines="Vertical" OnSorting="GridViewX_Sorting" OnRowDataBound="GridViewX_RowDataBound"
                    runat="server" Height="100" Width="100%" EnableViewState="true">
                </asp:GridView>
            </div>
            <asp:Timer ID="ResultsTimer" Interval="60000" Enabled="true" runat="server" OnTick="DisplayResultsTimer_Tick">
            </asp:Timer>
        </ContentTemplate>
    </asp:UpdatePanel>
</div>

Answer 1

You need to use BoundField or some other fields if you want more control over each column.

Look Declarative Syntax Section of this page for other type of fields.

Note : make sure AutoGenerateColumns="False" if you create columns by yourself.

<asp:GridView ID="GridViewX" runat="server" AutoGenerateColumns="False">
    <Columns>
        <asp:BoundField DataField="Name" HeaderText="Name">
            <ItemStyle Width="150px"/>
        </asp:BoundField>
        <asp:BoundField DataField="Address" HeaderText="Address">
            <ItemStyle Width="50px"/>
        </asp:BoundField>
    </Columns>
</asp:GridView>

protected void Page_Load(object sender, EventArgs e)
{
    GridViewX.DataSource = new List<Custom>
    {
        new Custom {Name = "Jon Doe", Address = "123 Street"},
        new Custom {Name = "Merry Doe", Address = "123 Street"},
    };
    GridViewX.DataBind(); 
}

public class Custom
{
    public string Name { get; set; }
    public string Address { get; set; }
}

Answer 2

Add <RowStyle CssClass="rowstyle" />

 <asp:GridView ID="GridViewX" RowStyle-Wrap="false" AllowSorting="true"
                    GridLines="Vertical" OnSorting="GridViewX_Sorting" OnRowDataBound="GridViewX_RowDataBound"
                    runat="server" Height="100" Width="100%" EnableViewState="true">
                 <RowStyle CssClass="rowstyle" />
                </asp:GridView> 

CSS:

<style>
        .rowstyle td
        {
            width:150px;
        }

    </style>