如何调整表格单元格以适应内容答案

【问题标题】：How to resize the table cell to fit the contents如何调整表格单元格以适应内容
【发布时间】：2014-07-11 16:07:40
【问题描述】：

我有一个 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%");
        }
    }

但结果还是一样。如何修改/添加到我的代码，使第一列更小，第二和第四列被拉伸以确保内容正确显示？

【问题讨论】：

标签： c# css asp.net aspxgridview

【解决方案1】：

我可以这样解决：

我将我的第一个 <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;
}

【讨论】：

【解决方案2】：

在每一列上，您必须指定其自己的宽度。为此，请单击智能标签 > 编辑列 > 选择列，然后在属性列表中转到 HeaderStyle > 宽度并将其设置为 100。

【讨论】：

对不起，改写这个问题，我很难理解。谢谢。
调整标题行的大小（大概是我正在做的）不会使后续行的大小相同吗？
是的。事实上确实如此。
它不工作。我用新设置更新了我的代码，但它仍然是一样的......