如何让我的GridView控件到页面上适合100％ [英] how do i make my gridview to fit 100% on page

查看：156
本文介绍了如何让我的GridView控件到页面上适合100％的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何让我的GridView的屏幕中很好地适应。
我添加了这个属性width =100％我。但是我的GridView还扩展了远远超出我已经把它设置为100％，我的头的宽度。

下面是我的GridView的第一次尝试我的源$ C ​​$ C。 

 ＆LT; ASP：GridView控件ID =GWCase=服务器顶级=0％WIDTH =100％背景色=＃CCCCCCBORDERCOLOR =＃999999 边框=实边框宽度=的3px的cellpadding =4CELLSPACING =2前景色=黑HEIGHT =199pxAutoGenerateSelectButton =真OnSelectedIndexChanged =GWCase_SelectedIndexChanged＆GT;    ＆LT; FooterStyle背景色=＃CCCCCC/＆GT;
    ＆LT; HeaderStyle背景色=黑字体粗体=真前景色=白/＆GT;
    ＆LT; PagerStyle背景色=＃CCCCCC前景色=黑Horizo​​ntalAlign =左/＆GT;
    ＆LT; RowStyle背景色=白/＆GT;
    ＆LT; SelectedRowStyle背景色=＃000099FONT-粗体=真前景色=白/＆GT;
    ＆LT; SortedAscendingCellStyle背景色=＃F1F1F1/＆GT;
    ＆LT; SortedAscendingHeaderStyle背景色=＃808080/＆GT;
    ＆LT; SortedDescendingCellStyle背景色=＃CAC9C9/＆GT;
    ＆LT; SortedDescendingHeaderStyle背景色=＃383838/＆GT;
＆LT; / ASP：GridView的＆GT;

我尝试使用CSS的方法是这样

 ＆LT; UL ID =assigngw＆GT;
＆LT; ASP：GridView控件ID =GWCase=服务器TOP =0％背景色=＃CCCCCCBORDERCOLOR =＃999999边框=实边框宽度=的3px的cellpadding =4CELLSPACING = 2前景色=黑HEIGHT =199pxAutoGenerateSelectButton =真OnSelectedIndexChanged =GWCase_SelectedIndexChanged＆GT;    ＆LT; FooterStyle背景色=＃CCCCCC/＆GT;
    ＆LT; HeaderStyle背景色=黑字体粗体=真前景色=白/＆GT;
    ＆LT; PagerStyle背景色=＃CCCCCC前景色=黑Horizo​​ntalAlign =左/＆GT;
    ＆LT; RowStyle背景色=白/＆GT;
    ＆LT; SelectedRowStyle背景色=＃000099FONT-粗体=真前景色=白/＆GT;
    ＆LT; SortedAscendingCellStyle背景色=＃F1F1F1/＆GT;
    ＆LT; SortedAscendingHeaderStyle背景色=＃808080/＆GT;
    ＆LT; SortedDescendingCellStyle背景色=＃CAC9C9/＆GT;
    ＆LT; SortedDescendingHeaderStyle背景色=＃383838/＆GT;
＆LT; / ASP：GridView的＆GT;
    ＆LT; / UL＆GT;

的CSS code：

  #assigngw {
宽度：100％;
}

可惜都无法正常工作。

下面是我的整个源$ C ​​$ C。 

 ＆LT; ASP：内容ID =内容1ContentPlaceHolderID =ContentPlaceHolder1=服务器＆GT;＆LT;链接rel =stylesheet属性HREF =CSS / style.css文件类型=文/ CSS/＆GT;
＆LT; ASP：的ScriptManager ID =ScriptManager1=服务器＆GT;
＆LT; / ASP：ScriptManager的＆GT;
＆LT; ASP：的UpdatePanel ID =UpdatePanel1=服务器＆GT;
＆LT;＆的ContentTemplate GT;＆所述;微升的id =assigngw＆GT;
    ＆LT; ASP：GridView控件ID =GWCase=服务器WIDTH =300像素TOP =0％背景色=＃CCCCCCBORDERCOLOR =＃999999边框=实边框宽度=的3px的cellpadding = 4CELLSPACING =2前景色=黑HEIGHT =199pxAutoGenerateSelectButton =真OnSelectedIndexChanged =GWCase_SelectedIndexChanged＆GT;    ＆LT; FooterStyle背景色=＃CCCCCC/＆GT;
    ＆LT; HeaderStyle背景色=黑字体粗体=真前景色=白/＆GT;
    ＆LT; PagerStyle背景色=＃CCCCCC前景色=黑Horizo​​ntalAlign =左/＆GT;
    ＆LT; RowStyle背景色=白/＆GT;
    ＆LT; SelectedRowStyle背景色=＃000099FONT-粗体=真前景色=白/＆GT;
    ＆LT; SortedAscendingCellStyle背景色=＃F1F1F1/＆GT;
    ＆LT; SortedAscendingHeaderStyle背景色=＃808080/＆GT;
    ＆LT; SortedDescendingCellStyle背景色=＃CAC9C9/＆GT;
    ＆LT; SortedDescendingHeaderStyle背景色=＃383838/＆GT;
＆LT; / ASP：GridView的＆GT;
    ＆LT; / UL＆GT;
＆LT; BR /＆GT;
案例ID：
＆LT; ASP：标签ID =lblCID=服务器＆GT;＆LT; / ASP：标签＆gt;
＆安培; NBSP;是接近的情况
＆LT; ASP：DropDownList的ID =lblocation=服务器OnSelectedIndexChanged =lblocation_SelectedIndexChanged的AutoPostBack =真DataTextField =位置DataValueField =位置＆GT;
    ＆LT; ASP：ListItem的＆GT;选择位置和LT; / ASP：ListItem的＆GT;
    ＆LT; ASP：ListItem的＆GT;武吉巴督NPC＆LT; / ASP：ListItem的＆GT;
    ＆LT; ASP：ListItem的＆GT;武吉班让全国人民代表大会和LT; / ASP：ListItem的＆GT;
    ＆LT; ASP：ListItem的＆GT;蔡厝港NPC＆LT; / ASP：ListItem的＆GT;
    ＆LT; ASP：ListItem的＆GT;裕廊西NPC＆LT; / ASP：ListItem的＆GT;
    ＆LT; ASP：ListItem的＆GT;南阳NPC＆LT; / ASP：ListItem的＆GT;
    ＆LT; ASP：ListItem的＆GT;东兀兰NPC与LT; / ASP：ListItem的＆GT;
    ＆LT; ASP：ListItem的＆GT;兀兰西NPC＆LT; / ASP：ListItem的＆GT;
    ＆LT; ASP：ListItem的＆GT;宏茂桥北NPC＆LT; / ASP：ListItem的＆GT;
    ＆LT; ASP：ListItem的＆GT;宏茂桥南NPC＆LT; / ASP：ListItem的＆GT;
    ＆LT; ASP：ListItem的＆GT; NPC榜鹅和LT; / ASP：ListItem的＆GT;
    ＆LT; ASP：ListItem的＆GT;后港NPC＆LT; / ASP：ListItem的＆GT;
    ＆LT; ASP：ListItem的＆GT;三巴旺人大和LT; / ASP：ListItem的＆GT;
    ＆LT; ASP：ListItem的＆GT;实龙岗NPC＆LT; / ASP：ListItem的＆GT;
    ＆LT; ASP：ListItem的＆GT;盛港NPC＆LT; / ASP：ListItem的＆GT;
    ＆LT; ASP：ListItem的＆GT;义顺北NPC＆LT; / ASP：ListItem的＆GT;
    ＆LT; ASP：ListItem的＆GT;义顺南NPC＆LT; / ASP：ListItem的＆GT;
    ＆LT; ASP：ListItem的＆GT;勿洛北NPC＆LT; / ASP：ListItem的＆GT;
    ＆LT; ASP：ListItem的＆GT;勿洛南NPC＆LT; / ASP：ListItem的＆GT;
    ＆LT; ASP：ListItem的＆GT;樟宜NPC＆LT; / ASP：ListItem的＆GT;
    ＆LT; ASP：ListItem的＆GT;芽笼NPC＆LT; / ASP：ListItem的＆GT;
    ＆LT; ASP：ListItem的＆GT;马林百列全国人民代表大会和LT; / ASP：ListItem的＆GT;
    ＆LT; ASP：ListItem的＆GT;白沙NPC＆LT; / ASP：ListItem的＆GT;
    ＆LT; ASP：ListItem的＆GT;淡滨尼NPC＆LT; / ASP：ListItem的＆GT;
    ＆LT; ASP：ListItem的＆GT;红山西NPC＆LT; / ASP：ListItem的＆GT;
    ＆LT; ASP：ListItem的＆GT;金文泰NPC＆LT; / ASP：ListItem的＆GT;
    ＆LT; ASP：ListItem的＆GT;皇后镇NPC＆LT; / ASP：ListItem的＆GT;
    ＆LT; ASP：ListItem的＆GT;裕廊东NPC＆LT; / ASP：ListItem的＆GT;
    ＆LT; ASP：ListItem的＆GT;璧山NPC＆LT; / ASP：ListItem的＆GT;
    ＆LT; ASP：ListItem的＆GT;武吉知马NPC＆LT; / ASP：ListItem的＆GT;
    ＆LT; ASP：ListItem的＆GT;甘榜Java的NPC＆LT; / ASP：ListItem的＆GT;
    ＆LT; ASP：ListItem的＆GT;果园NPC＆LT; / ASP：ListItem的＆GT;
    ＆LT; ASP：ListItem的＆GT;大巴窑NPC＆LT; / ASP：ListItem的＆GT;
    ＆LT; ASP：ListItem的＆GT;红山东NPC＆LT; / ASP：ListItem的＆GT;
    ＆LT; ASP：ListItem的＆GT;梧槽NPC＆LT; / ASP：ListItem的＆GT;
    ＆LT; ASP：ListItem的＆GT;滨海湾NPC＆LT; / ASP：ListItem的＆GT;
＆LT; / ASP：DropDownList的＆GT;
＆LT; BR /＆GT;
＆LT; BR /＆GT;
下面的案例将被分配给该选定的军官和放大器; NBSP;
    ＆LT; ASP：DropDownList的ID =DDLpolice=服务器DataTextField =dropdownpoliceDataValueField =dropdownpoliceOnSelectedIndexChanged =DDLpolice_SelectedIndexChanged1的风格=高度：的22px
    AppendDataBoundItems =真的AutoPostBack =真＆GT;
＆LT; ASP：ListItem的值= -  1＆GT;选择官和LT; / ASP：ListItem的＆GT;
    ＆LT; / ASP：DropDownList的＆GT;

＆NBSP;

    
        ＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;＆NBSP;
    
        

        

        
        


        


解决方案

问题是与您的测试内容和垃圾文字。

地址：

  #assigngw TD {
  自动换行：打破字;
}

这将允许每个单元格的长句不适合，将停止增加网格视图的规模突破。<​​/ P>

修改

试试这个

  .gridview {
    宽度：100％;
    自动换行：打破字;
    表格的布局：固定;
}

这里的关键是表格的布局：固定; ，因为它迫使细胞，以适应表而不是表的扩大，以适应细胞

的jsfiddle

How do i make my gridview's to fit nicely within the screen. I added this property width="100%" i. However my gridview still extends way beyond my header's width which i have set it as 100%.

Here are my source code of my gridview for the first attempt. 

<asp:GridView ID="GWCase" runat="server"  Top="0%" Width="100%" BackColor="#CCCCCC" BorderColor="#999999" BorderStyle="Solid" BorderWidth="3px" CellPadding="4" CellSpacing="2" ForeColor="Black" Height="199px" AutoGenerateSelectButton="True" OnSelectedIndexChanged="GWCase_SelectedIndexChanged">

    <FooterStyle BackColor="#CCCCCC" />
    <HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#CCCCCC" ForeColor="Black" HorizontalAlign="Left" />
    <RowStyle BackColor="White" />
    <SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
    <SortedAscendingCellStyle BackColor="#F1F1F1" />
    <SortedAscendingHeaderStyle BackColor="#808080" />
    <SortedDescendingCellStyle BackColor="#CAC9C9" />
    <SortedDescendingHeaderStyle BackColor="#383838" />
</asp:GridView>

I tried using the css method like this 

<ul id="assigngw">
<asp:GridView ID="GWCase" runat="server"  Top="0%" BackColor="#CCCCCC" BorderColor="#999999" BorderStyle="Solid" BorderWidth="3px" CellPadding="4" CellSpacing="2" ForeColor="Black" Height="199px" AutoGenerateSelectButton="True" OnSelectedIndexChanged="GWCase_SelectedIndexChanged">

    <FooterStyle BackColor="#CCCCCC" />
    <HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#CCCCCC" ForeColor="Black" HorizontalAlign="Left" />
    <RowStyle BackColor="White" />
    <SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
    <SortedAscendingCellStyle BackColor="#F1F1F1" />
    <SortedAscendingHeaderStyle BackColor="#808080" />
    <SortedDescendingCellStyle BackColor="#CAC9C9" />
    <SortedDescendingHeaderStyle BackColor="#383838" />
</asp:GridView>
    </ul>

Css code : 

#assigngw {
width:100%;
}

Unfortunately both does not work.

Here is my entire source code. 

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<link rel="stylesheet" href="css/style.css" type="text/css" />
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>

<ul id="assigngw">
    <asp:GridView ID="GWCase" runat="server" width="300px" Top="0%" BackColor="#CCCCCC" BorderColor="#999999" BorderStyle="Solid" BorderWidth="3px" CellPadding="4" CellSpacing="2" ForeColor="Black" Height="199px" AutoGenerateSelectButton="True" OnSelectedIndexChanged="GWCase_SelectedIndexChanged">

    <FooterStyle BackColor="#CCCCCC" />
    <HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
    <PagerStyle BackColor="#CCCCCC" ForeColor="Black" HorizontalAlign="Left" />
    <RowStyle BackColor="White" />
    <SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
    <SortedAscendingCellStyle BackColor="#F1F1F1" />
    <SortedAscendingHeaderStyle BackColor="#808080" />
    <SortedDescendingCellStyle BackColor="#CAC9C9" />
    <SortedDescendingHeaderStyle BackColor="#383838" />
</asp:GridView>
    </ul>


<br />
Case ID :
<asp:Label ID="lblCID" runat="server"></asp:Label>
&nbsp;is situation near
<asp:DropDownList ID="lblocation" runat="server" OnSelectedIndexChanged="lblocation_SelectedIndexChanged" AutoPostBack="True" DataTextField="location" DataValueField="location">
    <asp:ListItem>Select Location</asp:ListItem>
    <asp:ListItem>Bukit Batok NPC</asp:ListItem>
    <asp:ListItem>Bukit Panjang NPC</asp:ListItem>
    <asp:ListItem>Choa Chu Kang NPC</asp:ListItem>
    <asp:ListItem>Jurong West NPC</asp:ListItem>
    <asp:ListItem>Nanyang NPC</asp:ListItem>
    <asp:ListItem>Woodlands East NPC</asp:ListItem>
    <asp:ListItem>Woodlands West NPC</asp:ListItem>
    <asp:ListItem>Ang Mo Kio North NPC</asp:ListItem>
    <asp:ListItem>Ang Mo Kio South NPC</asp:ListItem>
    <asp:ListItem>Punggol NPC</asp:ListItem>
    <asp:ListItem>Hougang NPC</asp:ListItem>
    <asp:ListItem>Sembawang NPC</asp:ListItem>
    <asp:ListItem>Serangoon NPC</asp:ListItem>
    <asp:ListItem>Sengkang NPC</asp:ListItem>
    <asp:ListItem>Yishun North NPC</asp:ListItem>
    <asp:ListItem>Yishun South NPC</asp:ListItem>
    <asp:ListItem>Bedok North NPC</asp:ListItem>
    <asp:ListItem>Bedok South NPC</asp:ListItem>
    <asp:ListItem>Changi NPC</asp:ListItem>
    <asp:ListItem>Geylang NPC</asp:ListItem>
    <asp:ListItem>Marine Parade NPC</asp:ListItem>
    <asp:ListItem>Pasir Ris NPC</asp:ListItem>
    <asp:ListItem>Tampines NPC</asp:ListItem>
    <asp:ListItem>Bukit Merah West NPC</asp:ListItem>
    <asp:ListItem>Clementi NPC</asp:ListItem>
    <asp:ListItem>Queenstown NPC</asp:ListItem>
    <asp:ListItem>Jurong East NPC</asp:ListItem>
    <asp:ListItem>Bishan NPC</asp:ListItem>
    <asp:ListItem>Bukit Timah NPC</asp:ListItem>
    <asp:ListItem>Kampung Java NPC</asp:ListItem>
    <asp:ListItem>Orchard NPC</asp:ListItem>
    <asp:ListItem>Toa Payoh NPC</asp:ListItem>
    <asp:ListItem>Bukit Merah East NPC</asp:ListItem>
    <asp:ListItem>Rochor NPC</asp:ListItem>
    <asp:ListItem>Marina Bay NPC</asp:ListItem>
</asp:DropDownList>
<br />
<br />
The following case will be assigned to this selected officer&nbsp;
    <asp:DropDownList ID="DDLpolice" runat="server" DataTextField="dropdownpolice" DataValueField="dropdownpolice" OnSelectedIndexChanged ="DDLpolice_SelectedIndexChanged1" style="height: 22px"
    AppendDataBoundItems="true" AutoPostBack="True">
<asp:ListItem Value="-1">Select Officer</asp:ListItem>
    </asp:DropDownList>

 
      

解决方案

The problem is with your test content and the garbage text.

Add:

#assigngw td {
  word-wrap:break-word;
}

This will allow each cell to break on the long sentences that don't fit and will stop it increasing the size of the grid view.

EDIT

Try this

.gridview {
    width: 100%; 
    word-wrap:break-word;
    table-layout: fixed;
}

The key here is table-layout: fixed; as it forces the cells to fit the table instead of the table expanding to fit the cells.

Updated jsFiddle

这篇关于如何让我的GridView控件到页面上适合100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆