在c#中显示带有滚动条的gridview？答案

【问题标题】：Displaying a gridview with scrollbar in c#?在c#中显示带有滚动条的gridview？
【发布时间】：2017-08-05 19:39:58
【问题描述】：

我正在尝试构建一个带有水平滚动条和垂直滚动条的网格视图，例如 sql 表。目前，我拥有的表格非常基本，看起来并不整洁，我担心随着列数的增加，gridview 会看起来更加混乱。我附上了两个屏幕截图，说明我当前的 gridview 是如何的，另一个是我想如何构建我的 gridview。非常感谢任何建议或建议。

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

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        DataTable tblcsv = new DataTable();
        //creating columns  
        tblcsv.Columns.Add("Transaction_date");
        tblcsv.Columns.Add("Product");
        tblcsv.Columns.Add("Price");
        tblcsv.Columns.Add("Payment_Type");
        tblcsv.Columns.Add("Name");
        tblcsv.Columns.Add("City");
        tblcsv.Columns.Add("State");
        tblcsv.Columns.Add("Country");
        tblcsv.Columns.Add("Account_Created");
        tblcsv.Columns.Add("Last_Login");
        tblcsv.Columns.Add("Latitude");
        tblcsv.Columns.Add("Longitude");
        tblcsv.Columns.Add("Data");
        tblcsv.Columns.Add("a");
        tblcsv.Columns.Add("b");
        tblcsv.Columns.Add("c");
        tblcsv.Columns.Add("d");
        tblcsv.Columns.Add("e");
        tblcsv.Columns.Add("f");
        tblcsv.Columns.Add("g");
        tblcsv.Columns.Add("h");
        tblcsv.Columns.Add("i");
        tblcsv.Columns.Add("j");
        tblcsv.Columns.Add("k");





        //getting full file path of Uploaded file  
        //Reading All text  
        string ReadCSV = File.ReadAllText(Server.MapPath("~/c.csv"));
        //spliting row after new line  
        foreach (string csvRow in ReadCSV.Split('\n'))
        {
            if (!string.IsNullOrEmpty(csvRow))
            {
                //Adding each row into datatable  
                tblcsv.Rows.Add();
                int count = 0;
                foreach (string FileRec in csvRow.Split(','))
                {
                    tblcsv.Rows[tblcsv.Rows.Count - 1][count] = FileRec;
                    count++;
                }
            }
            //Calling Bind Grid Functions  
            Bindgrid(tblcsv);

        }  
    }

    private void Bindgrid(DataTable csvdt)
    {
        GridView1.DataSource = csvdt;
        GridView1.DataBind();
    }  
}

aspx-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" AllowPaging="True"  width="300px" AllowSorting="True"> 
</asp:GridView>
    </div>
    </form>
</body>
</html>

这就是我希望我的网格看起来的样子 - 1.我希望我的gridview具有固定的宽度和固定的列宽，列的水平滚动条和行的垂直滚动条。

【问题讨论】：

标签： c# html css asp.net gridview

【解决方案1】：

您可以使用 css 来做到这一点，例如下面使用的“溢出”属性。

table{
  height:500px;
  width:1000px;
  overflow-x:scroll;
  overflow-y:scroll;
}

    <table>
    <thead>
      <th>ID</th>
      <th>FirstName</th>
      <th>LastName</th>
    </thead>
        <tbody>
          <tr>
             <td>1</td>
             <td>joe</td>
             <td>Lobo</td>

          </tr>
          <tr>
             <td>1</td>
             <td>joe</td>
             <td>Lobo</td>

          </tr>
                    <tr>
             <td>1</td>
             <td>joe</td>
             <td>Lobo</td>

          </tr>
                    <tr>
             <td>1</td>
             <td>joe</td>
             <td>Lobo</td>

          </tr>
                    <tr>
             <td>1</td>
             <td>joe</td>
             <td>Lobo</td>

          </tr>
</tbody>
    </table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

以下链接可能会有所帮助

https://www.w3schools.com/cssref/pr_pos_overflow.asp
https://www.w3schools.com/cssref/css3_pr_overflow-x.asp
https://www.w3schools.com/cssref/css3_pr_overflow-y.asp

【讨论】：

【解决方案2】：

试试这个：

 <div style="width: 100%; height: 400px; overflow: scroll" >your GridView</div>

【讨论】：