绑定数据源后如何调整gridview列宽答案

【问题标题】：How to adjust the gridview columns width after binding the datasource绑定数据源后如何调整gridview列宽
【发布时间】：2021-06-19 16:23:49
【问题描述】：

我有一个绑定SQL数据的asp:GridView，绑定数据后如何调整gridview列的宽度？

        myConnect = new MySqlConnection(conStr);
        myConnect.Open();

        try
        {
            string strSQL = "SELECT * FROM report_data WHERE user = @user";

            MySqlDataAdapter mySqlDataAdapter = new MySqlDataAdapter(strSQL, myConnect);
            mySqlDataAdapter.SelectCommand.Parameters.AddWithValue("@user", userName);

            DataTable dt = new DataTable();
            mySqlDataAdapter.Fill(dt);
            gvRecords.DataSource = dt;
            gvRecords.DataBind();

        }
        catch (Exception ex)
        {
            Console.WriteLine(ex);
        }
        finally
        {
            myConnect.Close();
        }

下面是aspx中的代码

    <div>
        <asp:GridView CssClass="gridview" ID="gvRecords" runat="server" OnDataBound="gvRecords_DataBound">
        </asp:GridView>
    </div>

还有我的 css 数据

.gridview tr td {
padding: 5px;
border: 1px solid #ddd;
}
.gridview tr th {
padding: 5px;}

我也尝试过这种方法，但不起作用

    protected void gvRecords_DataBound(object sender, EventArgs e)
    {
        gvRecords.Columns[0].ItemStyle.Width = Unit.Pixel(150);
        gvRecords.Columns[1].ItemStyle.Width = Unit.Pixel(50);
        gvRecords.Columns[2].ItemStyle.Width = Unit.Pixel(100);
        gvRecords.Columns[3].ItemStyle.Width = Unit.Pixel(200);
        gvRecords.Columns[4].ItemStyle.Width = Unit.Pixel(50);
    }

AutoGenerateColumns 生成的列宽不适合数据。

在 css 中添加宽度后，列宽会发生变化。比以前好看。

.gridview tr td {
padding: 5px;
border: 1px solid #ddd;
width: 100px;}

但是有没有单独调整列宽？

【问题讨论】：

您在浏览器中看到了什么。您正在创建的 css 规则是否应用？
上图是我在 chrome 浏览器中得到的，css 文件运行良好。
你可以参考这个question或者在css中输入! important。不确定但你也可以试试gvRecords.Columns[0].Attributes.add("style","150px !important");
我试试 gvRecords.Columns[0].Attributes.add("style","150px !important")。但在 Attributes 属性上出现错误。
不确定语法，但应该有一种方法可以为列添加样式。

标签： c# asp.net gridview

【解决方案1】：

我认为与其在运行时设置它，不如使用下面的 css

.gridview tr td {
  padding: 5px;
  border: 1px solid #ddd;
}


// second td
.gridview tr td+td {
   width:50px !important;
}

【讨论】：

是的。是工作。虽然代码看起来很重。我做了很多 tr td+td+td+td...等等。
@TYS 如果您使用的是 CSS 3，这里是一个参考，可以帮助您稍微优化 css。 support.awesome-table.com/hc/en-us/articles/…

【解决方案2】：

将 .cs 文件添加到您的头部

<link rel="stylesheet" type="text/css" href="stylesheet1.css" />

风格：

.mytable { width: 100%; }

在你的组件上：

asp:GridView ID="GridView1" runat="server" CssClass="mytable"

【讨论】：

我这样做了，但没有任何改变。我认为我的 GridView 原始宽度是 100%。