Asp.net gridview 列宽答案

【问题标题】：Asp.net gridview column widthAsp.net gridview 列宽
【发布时间】：2017-08-01 15:21:09
【问题描述】：

我的代码如下：

<asp:BoundField DataField = "resultId" HeaderText = "Result Id" ItemStyle-Width ="15%" ControlStyle-Width="300px"/>

我已尝试使用 ItemStyle-Width 和 ControlStyle-Width 来修复我的 gridView 列宽，但似乎都不起作用。

如何设置column 宽度？

【问题讨论】：

您的实际像素大小是多少？你想要 1280px 或 300px 的 15%？
尝试将GridView的RowStyle-Wrap属性设置为True。 <RowStyle Width="15%" />

标签： c# asp.net gridview

【解决方案1】：

<asp:BoundField DataField = "resultId" HeaderText = "Result Id">
   <ItemStyle Width="30px"></ItemStyle>
</asp:BoundField>

【讨论】：

【解决方案2】：

做这样的事情，

<asp:BoundField DataField = "resultId" HeaderText = "Result Id" HeaderStyle-Width="100px" />

【讨论】：

【解决方案3】：

首先你应该将autogeneratecolumns="false" 添加到你的<asp:GridView>

您的 aspx 文件应如下所示：

     <asp:GridView ID="GridView1" CssClass="gridview" autogeneratecolumns="False" Width="900" runat="server" HeaderStyle-CssClass="HeaderStyle">
        <Columns>
            <asp:boundfield DataField="field0">
                <HeaderStyle CssClass="HeaderStyle" />
                <ItemStyle CssClass="ItemStyle" />
                <FooterStyle CssClass="HeaderStyle" />
                <ControlStyle CssClass="HeaderStyle" />
           </asp:boundfield>
            <asp:boundfield DataField="field1">
                <HeaderStyle CssClass="HeaderStyle" />
                <ItemStyle CssClass="ItemStyle" />
                <FooterStyle CssClass="HeaderStyle" />
                <ControlStyle CssClass="HeaderStyle" />
           </asp:boundfield>
           .........
        </Columns>
        </asp:GridView>

你的 CSS 文件可能是这样的：

    .HeaderStyle
        {
            background-color: #900;
            color: White;
            font-weight: bold;
            white-space:nowrap;
            width: 100px;
            max-width: 100px;
            overflow: hidden;
        }

        .ItemStyle
        {
            background-color: #eaebec;
            color: Black;
            font-weight: bold;
            white-space:nowrap;
            width: 100px;
            max-width: 100px;
            overflow: hidden;
        }
.gridview {
    font-family: Arial, Helvetica, sans-serif;
    color: #666;
    font-size: 12px;
    background: #eaebec;
    margin: 20px;
    border: #ccc 1px solid;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-box-shadow: 0 1px 2px #d1d1d1;
    -webkit-box-shadow: 0 1px 2px #d1d1d1;
}

您为 c# 提出了这个问题，但我将在此处添加 VB 代码，但是您可以转换它：

    Dim tablo As New DataTable
    Dim row As DataRow
    tablo.Columns.Add("field0", System.Type.GetType("System.String"))
    tablo.Columns.Add("field1", System.Type.GetType("System.String"))
    .......
    For i = 1 to XX
        row("field" + Trim(Str(i))) = "Something"
    Next
    tablo.Rows.Add(row)
    GridView1.Columns(0).HeaderText = "Something Header"
    GridView1.Columns(1).HeaderText = "Something Other Header"
    .......

我想就是这样。希望对您有所帮助。

【讨论】：

【解决方案4】：

在页面加载函数中放这段代码：

protected void Page_Load(object sender, EventArgs e)
{
    GridView1.Attributes.Add("style", "word-break:break-all; word-wrap:break-word");    
}

然后在 Boundfield 属性中将属性设为：

HeaderStyle-Width="100px"

【讨论】：

【解决方案5】：

试试这个

<asp:BoundField DataField = "resultId" HeaderText = "Result Id" ItemStyle-Width ="15%" ItemStyle-Wrap="false" ControlStyle-Width="300px"/>

你也可以在px 试试这个。

【讨论】：

【解决方案6】：

<asp:GridView ID="gvDemo2" runat="server" AutoGenerateColumns="false">
            <AlternatingRowStyle Width="60px" />
            <Columns>
                <asp:BoundField DataField="FileId" HeaderText="Name" ItemStyle-Width="100" />
                <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="100" />
                <asp:BoundField DataField="Number" HeaderText="Number" ItemStyle-Width="100" />
                <asp:BoundField DataField="Email" HeaderText="Email" ItemStyle-Width="100" />
                <asp:BoundField DataField="Date" HeaderText="Date" ItemStyle-Width="100" />
                <asp:BoundField DataField="Message" HeaderText="Message" ItemStyle-Width="100" />
            </Columns>
        </asp:GridView>

【讨论】：