如何调整表格单元格的大小以适应内容

Question

我有一个GridView用于显示一些内容：

<asp:GridView ID="GridView1" AllowSorting="True" OnSorting="GridView1_Sorting" ClientIDMode="Static" runat="server" AutoGenerateColumns="False" EmptyDataText="No PDF was generated" OnRowCreated="GridView1_RowCreated">
        <Columns>
            <asp:BoundField DataField="Text" HeaderText="File Name" SortExpression="FileName" >
            <HeaderStyle Width="15%" />
            </asp:BoundField>
            <asp:BoundField DataField="Value" HeaderText="File Modified Date" SortExpression="FileDate" >
            <HeaderStyle Width="25%" />
            </asp:BoundField>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:LinkButton ID="lnkDownload" Text="Download" runat="server" CommandArgument='<%# Container.DataItemIndex %>' OnClick="DownloadFile" />
                </ItemTemplate>
                <HeaderStyle Width="15%" />
            </asp:TemplateField>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:LinkButton ID="lnkView" Text="View in Browser" CommandArgument='<%# Container.DataItemIndex %>' OnClientClick="window.document.forms[0].target='blank';" runat="server" OnClick="ViewFile" />
                </ItemTemplate>
                <HeaderStyle Width="35%" />
            </asp:TemplateField>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:ImageButton runat="server" ToolTip="Delete File" ID="lnkDelete" OnClientClick="confirmUser()" OnClick="DeleteFile" CommandArgument='<%# Container.DataItemIndex %>' ImageUrl="~/delete.png" Width="50px" Height="50px" />
                </ItemTemplate>
                <HeaderStyle Width="15%" />
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

显示以下内容：

正如您所看到的，第二列和第四列太小了。所以我添加了以下代码隐藏来解决问题：

protected void GridView1_RowDataBound(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.Header)
        {
            TableCell cell0 = e.Row.Cells[0];
            cell0.Width = new Unit("35%");

            TableCell cell1 = e.Row.Cells[1];
            cell1.Width = new Unit("20%");

            TableCell cell2 = e.Row.Cells[2];
            cell2.Width = new Unit("15%");

            TableCell cell3 = e.Row.Cells[3];
            cell3.Width = new Unit("15%");

            TableCell cell4 = e.Row.Cells[4];
            cell4.Width = new Unit("15%");
        }
    }

但结果仍然相同。如何修改/添加我的代码，以便第一列更小，第二列和第四列延伸，以确保内容正确显示？

Answer 1

在每列上，您必须指定自己的宽度。要执行此操作，请单击智能标记＆gt;编辑列＆gt;选择列，然后在属性列表中转到HeaderStyle＆gt;宽度并将其设置为100.

Answer 2

我能够这样解决：

我将第一个<asp:BoundField />更改为：

<asp:BoundField DataField="Text" HeaderText="File Name" SortExpression="FileName" ItemStyle-CssClass="checkIt"></asp:BoundField>

并添加了以下CSS：

.checkIt {
     width: 30%;
     word-break: break-all;
     word-wrap: break-word;
}