设置gridview列宽？答案

【问题标题】：Set gridview column width?设置gridview列宽？
【发布时间】：2017-09-13 05:42:59
【问题描述】：

在下面的例子中，我用一些数据填充了一个gridview。一切都很好，但我不确定如何设置列宽。 gridview 没有任何设置的列，所以我不能使用ItemStyle-Width。我尝试使用GridViewClicks_RowDataBound，但e.Row.Cells[i].Width 不工作，即使e.Row.Cells[i].Height 工作。

我也尝试在page_load 中设置column.ItemStyle.Width，但也不起作用。

基本上，我需要设置gridview的列宽而不在标记中添加列。

感谢任何帮助。

谢谢。

这是标记：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .GridDock
        {
            overflow-x: auto;
            width:  calc(100% - 480px);
            padding: 0 0 17px 0;
        }
    </style>
    <script type="text/javascript">

        $('#dvGridWidth').width($('#dvScreenWidth').width());

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div style="width: 300px; height: 300px; display:inline-block; vertical-align:top">
            <asp:Button ID="Button1" runat="server" Width="278px" Text="Button" />
        </div>
        <div style="width: 160px; height: 160px; display:inline-block;vertical-align:top">
            <asp:Button ID="Button2" runat="server" Width="140px" Text="Button" />
        </div>
        <div style="display:inline-block;" class="GridDock" id="dvGridWidth">
            <asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridViewClicks_RowDataBound">
            </asp:GridView>
        </div>
    </div>
    </form>
</body>
</html>

还有代码隐藏：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

namespace ToErase
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            DataTable gridDataDataTable = new DataTable();
            gridDataDataTable.Columns.Add("ID");
            gridDataDataTable.Columns.Add("Name");
            gridDataDataTable.Columns.Add("Address1");
            gridDataDataTable.Columns.Add("Address2");
            gridDataDataTable.Columns.Add("Address3");
            gridDataDataTable.Columns.Add("City");
            gridDataDataTable.Columns.Add("Zip");
            gridDataDataTable.Columns.Add("Province");
            gridDataDataTable.Columns.Add("Country");
            gridDataDataTable.Columns.Add("Sex");
            gridDataDataTable.Columns.Add("SNo");
            gridDataDataTable.Columns.Add("TelNo");
            gridDataDataTable.Columns.Add("FaxNo");
            gridDataDataTable.Columns.Add("MobileNo");
            gridDataDataTable.Columns.Add("VehicleNo");
            gridDataDataTable.Columns.Add("Color");
            gridDataDataTable.Columns.Add("Height");
            gridDataDataTable.Columns.Add("Weight");
            gridDataDataTable.Columns.Add("Company");
            gridDataDataTable.Columns.Add("CompanyAddress");
            gridDataDataTable.Columns.Add("CompanyTelNo");
            gridDataDataTable.Columns.Add("CompanyFaxNo");

            gridDataDataTable.Rows.Add("1", "Ryan", "City Stree1", "City Stree2", "City Stree1", "Barcelona", "232232", "N/A", "Spain", "Male", "S23343", "2223-232323-22", "2223-232323-22", "2223-232323-22", "2223-232323-22", "Red", "80cm", "75kg", "Lockheed Martin", "City Street3", "800-536145", "800-142587");
            gridDataDataTable.Rows.Add("2", "Ryan", "City Stree1", "City Stree2", "City Stree1", "Barcelona", "232232", "N/A", "Spain", "Male", "S23343", "2223-232323-22", "2223-232323-22", "2223-232323-22", "2223-232323-22", "Red", "80cm", "75kg", "Lockheed Martin", "City Street3", "800-536145", "800-142587");
            gridDataDataTable.Rows.Add("3", "Ryan", "City Stree1", "City Stree2", "City Stree1", "Barcelona", "232232", "N/A", "Spain", "Male", "S23343", "2223-232323-22", "2223-232323-22", "2223-232323-22", "2223-232323-22", "Red", "80cm", "75kg", "Lockheed Martin", "City Street3", "800-536145", "800-142587");

            GridView1.DataSource = gridDataDataTable;
            GridView1.DataBind();    
            /* The following code does not affect grid columns */                  
            foreach (DataControlField column in GridView1.Columns)
            {
                column.ItemStyle.Width = Unit.Pixel(400);
            }

        }
        protected void GridViewClicks_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                DataRowView drv = e.Row.DataItem as DataRowView;

                for (int i = 0; i < drv.Row.ItemArray.Length; i++)
                {
                    e.Row.Cells[i].Width = 200;  // The width is not being set to 200px
                    e.Row.Cells[i].Height = 200; // This works, I can set the height
                }
            }
        }
    }
}

【问题讨论】：

可能是重复的，看看这个：stackoverflow.com/a/2740947/5418068
不是重复的。这正是我之前测试过的代码不起作用。我在我的问题中提到了这一点，并包含了来自同一个问题的代码。

标签： c# html css asp.net gridview

【解决方案1】：

您可以将 Css 类（属性）添加到您的 gridview 并且浏览器中的 gridview 呈现为您可以根据需要设计/指定表格的表格。

添加一个 CSS 样式说：

table{
    border: 1px solid black;
    table-layout: fixed;
    width: 200px;
}

th, td {
    border: 1px solid black;
    width: 100px;
}

@Runtime 使用 GridView 的 RowDataBound 事件更改宽度：例如：

protected void DataGrid_RowDataBound(object sender, GridViewRowEventArgs e)
{
     e.Row.Cells[0].Width = new Unit("width-in-px");
     e.Row.Cells[1].Width = new Unit("width-in-px");
     ......
}

您还可以计算 gridview 列并循环上面的内容，以防宽度相同

【讨论】：

感谢您的回复。 200px 的宽度有什么作用？我刚刚加了那个css，把RowDataBound中的e.Row.Cells[i].Width改成400px，宽度设置为400px。
但是如果我删除其中任何一个（您发布的 css 或 RowDataBound 中的 e.Row.Cells[i].Width，它不会正确显示。似乎它需要两者，但我不确定在哪里我可以从 CSS 中看到 200px。
好像 CSS 中的 width 值无关紧要，但该属性和 table-layout 需要在那里，所以 e.Row.Cells[i].Width 有效。听起来对吗？
@rbhatup 200px 为列提供宽度
@rbhatup 检查我已经更新的答案，可能会对你有所帮助。