can i set the width of fields in my datagrid?

how can i tighten things up and make the fields not so wide so it can fit on a page without horizontal scrolling? i added css to a div but the field is still very long while the link text does wrap (in some browsers)

i am hopping for a .net way to get it to work in all browsers.

here is my terrible UI of my data grid

here is my defined asp.net code:

<asp:GridView ID="gv" runat="server" CellPadding="4" Font-Names="Verdana" Font-Size="8pt"
    EnableModelValidation="True" ForeColor="#333333" GridLines="None" OnRowCommand="gv_RowCommand"
    OnRowEditing="gv_RowEditing" OnRowCancelingEdit="gv_RowCancelingEdit" OnRowDataBound="gv_RowDataBound"
    OnRowDeleting="gv_RowDeleting" OnRowUpdating="gv_RowUpdating" ShowFooter="true"
    DataKeyNames="ProjectLinkId,LastUpdate" AutoGenerateColumns="False">
    <AlternatingRowStyle BackColor="White" />
    <RowStyle BackColor="#EFF3FB" />
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <table>
                    <tr>
                        <td>
                            <asp:Button runat="server" ID="cbEdit" Text="Edit" Width="75px" Font-Size="8pt" CommandName="Edit" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Button runat="server" ID="cbDelete" Text="Delete" Width="75px" Font-Size="8pt"
                                CommandName="Delete" />
                        </td>
                    </tr>
                </table>
            </ItemTemplate>
            <EditItemTemplate>
                <table>
                    <tr>
                        <td>
                            <asp:Button runat="server" ID="cbUpdate" Text="Update" Width="75px" Font-Size="8pt"
                                CommandName="Update" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Button runat="server" ID="cbCancel" Text="Cancel" Width="75px" Font-Size="8pt"
                                CommandName="Cancel" />
                        </td>
                    </tr>
                </table>
            </EditItemTemplate>
            <FooterTemplate>
                <asp:Button runat="server" ID="cbSave" Text="Insert" Width="75px" Font-Size="8pt"
                    CommandName="Save" />
            </FooterTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Type">
            <ItemTemplate>
                <asp:Label runat="server" ID="lblLinkTypeText" Text='<%# Bind("LinkTypeText") %>'
                    CssClass="DefaultFont" />
            </ItemTemplate>
            <EditItemTemplate>
                <asp:DropDownList runat="server" ID="ddlLinkTypeCID" CssClass="DefaultFont" />
            </EditItemTemplate>
            <FooterTemplate>
                <asp:DropDownList runat="server" ID="ftrLinkTypeCID" CssClass="DefaultFont" />
            </FooterTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="URL">
            <ItemTemplate>
                <div style="width:316px; word-wrap: break-word">
                    <asp:HyperLink runat="server" ID="lbURL" NavigateUrl='<%# Bind("URL") %>' Text='<%# Bind("URL") %>' Width="300" />
                </div>   
            </ItemTemplate>
            <EditItemTemplate>
                <asp:TextBox runat="server" ID="txtURL" TextMode="MultiLine" Text='<%# Bind("URL") %>'
                    CssClass="DefaultTextBox" />
            </EditItemTemplate>
            <FooterTemplate>
                <asp:TextBox runat="server" ID="ftrURL" TextMode="MultiLine" Text='<%# Bind("URL") %>'
                    CssClass="DefaultTextBox" />
            </FooterTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Description">
            <ItemTemplate>
                <div style="width:316px; word-wrap: break-word">
                    <asp:Label runat="server" ID="lblDescription" Text='<%# Bi开发者_开发技巧nd("Description") %>' CssClass="DefaultFont"/>
                </div>
            </ItemTemplate>
            <EditItemTemplate>
                <asp:TextBox runat="server" ID="txtDescription" TextMode="MultiLine" Text='<%# Bind("Description") %>'
                    CssClass="DefaultTextBox" />
            </EditItemTemplate>
            <FooterTemplate>
                <asp:TextBox runat="server" ID="ftrDescription" TextMode="MultiLine" Text='<%# Bind("Description") %>'
                    CssClass="DefaultTextBox" />
            </FooterTemplate>
        </asp:TemplateField>
    </Columns>
    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
    <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
    <EditRowStyle BackColor="#2461BF" />
    <AlternatingRowStyle BackColor="White" />
</asp:GridView>

---

You can add a ItemStyle element to your TemplateField

Example:

<asp:TemplateField>
    <ItemStyle Width="45%" />
    <ItemTemplate>
        ...
    </ItemTemplate>
</asp:TemplateField>

---

Try modifying the width in the ItemTemplate for the URL column, since that seems to be the problem one. Try something like 100px instead of 316

Specifically, here:

<ItemTemplate>
   <div style="width:316px; word-wrap: break-word">
   <asp:HyperLink runat="server" ID="lbURL" NavigateUrl='<%# Bind("URL") %>' Text='<%#Bind("URL") %>' Width="300" />
   </div>   
 </ItemTemplate>

---

why dont you put a css class on it and control the width from the css file?

/** EDIT **/

you can do it inline or put a class with the cssClass="nameofcolumn" and then on the css file:

.nameofcolumn{ width: 400px; }

Hope it helps!

---

Here is another variation

<asp:TemplateField>
    <ItemStyle CssClass="styled-column"></ItemStyle>
    <ItemTemplate>
       ...
    </ItemTemplate>
</asp:TemplateField>

css:

.styled-column {
    width: 300px;
}

renders as:

<td class="styled-column">
      ...          
</td>