问题描述
如何让我的GridView的屏幕中很好地适应。
我添加了这个属性width =100%我。但是我的GridView还扩展了远远超出我已经把它设置为100%,我的头的宽度。
下面是我的GridView的第一次尝试我的源$ C $ C。
< ASP:GridView控件ID =GWCase=服务器顶级=0%WIDTH =100%背景色=#CCCCCCBORDERCOLOR =#999999 边框=实边框宽度=的3px的cellpadding =4CELLSPACING =2前景色=黑HEIGHT =199pxAutoGenerateSelectButton =真OnSelectedIndexChanged =GWCase_SelectedIndexChanged> < FooterStyle背景色=#CCCCCC/>
< HeaderStyle背景色=黑字体粗体=真前景色=白/>
< PagerStyle背景色=#CCCCCC前景色=黑HorizontalAlign =左/>
< RowStyle背景色=白/>
< SelectedRowStyle背景色=#000099FONT-粗体=真前景色=白/>
< SortedAscendingCellStyle背景色=#F1F1F1/>
< SortedAscendingHeaderStyle背景色=#808080/>
< SortedDescendingCellStyle背景色=#CAC9C9/>
< SortedDescendingHeaderStyle背景色=#383838/>
< / ASP:GridView的>
我尝试使用CSS的方法是这样
< UL ID =assigngw>
< ASP:GridView控件ID =GWCase=服务器TOP =0%背景色=#CCCCCCBORDERCOLOR =#999999边框=实边框宽度=的3px的cellpadding =4CELLSPACING = 2前景色=黑HEIGHT =199pxAutoGenerateSelectButton =真OnSelectedIndexChanged =GWCase_SelectedIndexChanged> < FooterStyle背景色=#CCCCCC/>
< HeaderStyle背景色=黑字体粗体=真前景色=白/>
< PagerStyle背景色=#CCCCCC前景色=黑HorizontalAlign =左/>
< RowStyle背景色=白/>
< SelectedRowStyle背景色=#000099FONT-粗体=真前景色=白/>
< SortedAscendingCellStyle背景色=#F1F1F1/>
< SortedAscendingHeaderStyle背景色=#808080/>
< SortedDescendingCellStyle背景色=#CAC9C9/>
< SortedDescendingHeaderStyle背景色=#383838/>
< / ASP:GridView的>
< / UL>
的CSS code:
#assigngw {
宽度:100%;
}
可惜都无法正常工作。
下面是我的整个源$ C $ C。
< ASP:内容ID =内容1ContentPlaceHolderID =ContentPlaceHolder1=服务器><链接rel =stylesheet属性HREF =CSS / style.css文件类型=文/ CSS/>
< ASP:的ScriptManager ID =ScriptManager1=服务器>
< / ASP:ScriptManager的>
< ASP:的UpdatePanel ID =UpdatePanel1=服务器>
<&的ContentTemplate GT;&所述;微升的id =assigngw>
< ASP:GridView控件ID =GWCase=服务器WIDTH =300像素TOP =0%背景色=#CCCCCCBORDERCOLOR =#999999边框=实边框宽度=的3px的cellpadding = 4CELLSPACING =2前景色=黑HEIGHT =199pxAutoGenerateSelectButton =真OnSelectedIndexChanged =GWCase_SelectedIndexChanged> < FooterStyle背景色=#CCCCCC/>
< HeaderStyle背景色=黑字体粗体=真前景色=白/>
< PagerStyle背景色=#CCCCCC前景色=黑HorizontalAlign =左/>
< RowStyle背景色=白/>
< SelectedRowStyle背景色=#000099FONT-粗体=真前景色=白/>
< SortedAscendingCellStyle背景色=#F1F1F1/>
< SortedAscendingHeaderStyle背景色=#808080/>
< SortedDescendingCellStyle背景色=#CAC9C9/>
< SortedDescendingHeaderStyle背景色=#383838/>
< / ASP:GridView的>
< / UL>
< BR />
案例ID:
< ASP:标签ID =lblCID=服务器>< / ASP:标签>
&安培; NBSP;是接近的情况
< ASP:DropDownList的ID =lblocation=服务器OnSelectedIndexChanged =lblocation_SelectedIndexChanged的AutoPostBack =真DataTextField =位置DataValueField =位置>
< ASP:ListItem的>选择位置和LT; / ASP:ListItem的>
< ASP:ListItem的>武吉巴督NPC< / ASP:ListItem的>
< ASP:ListItem的>武吉班让全国人民代表大会和LT; / ASP:ListItem的>
< ASP:ListItem的>蔡厝港NPC< / ASP:ListItem的>
< ASP:ListItem的>裕廊西NPC< / ASP:ListItem的>
< ASP:ListItem的>南阳NPC< / ASP:ListItem的>
< ASP:ListItem的>东兀兰NPC与LT; / ASP:ListItem的>
< ASP:ListItem的>兀兰西NPC< / ASP:ListItem的>
< ASP:ListItem的>宏茂桥北NPC< / ASP:ListItem的>
< ASP:ListItem的>宏茂桥南NPC< / ASP:ListItem的>
< ASP:ListItem的> NPC榜鹅和LT; / ASP:ListItem的>
< ASP:ListItem的>后港NPC< / ASP:ListItem的>
< ASP:ListItem的>三巴旺人大和LT; / ASP:ListItem的>
< ASP:ListItem的>实龙岗NPC< / ASP:ListItem的>
< ASP:ListItem的>盛港NPC< / ASP:ListItem的>
< ASP:ListItem的>义顺北NPC< / ASP:ListItem的>
< ASP:ListItem的>义顺南NPC< / ASP:ListItem的>
< ASP:ListItem的>勿洛北NPC< / ASP:ListItem的>
< ASP:ListItem的>勿洛南NPC< / ASP:ListItem的>
< ASP:ListItem的>樟宜NPC< / ASP:ListItem的>
< ASP:ListItem的>芽笼NPC< / ASP:ListItem的>
< ASP:ListItem的>马林百列全国人民代表大会和LT; / ASP:ListItem的>
< ASP:ListItem的>白沙NPC< / ASP:ListItem的>
< ASP:ListItem的>淡滨尼NPC< / ASP:ListItem的>
< ASP:ListItem的>红山西NPC< / ASP:ListItem的>
< ASP:ListItem的>金文泰NPC< / ASP:ListItem的>
< ASP:ListItem的>皇后镇NPC< / ASP:ListItem的>
< ASP:ListItem的>裕廊东NPC< / ASP:ListItem的>
< ASP:ListItem的>璧山NPC< / ASP:ListItem的>
< ASP:ListItem的>武吉知马NPC< / ASP:ListItem的>
< ASP:ListItem的>甘榜Java的NPC< / ASP:ListItem的>
< ASP:ListItem的>果园NPC< / ASP:ListItem的>
< ASP:ListItem的>大巴窑NPC< / ASP:ListItem的>
< ASP:ListItem的>红山东NPC< / ASP:ListItem的>
< ASP:ListItem的>梧槽NPC< / ASP:ListItem的>
< ASP:ListItem的>滨海湾NPC< / ASP:ListItem的>
< / ASP:DropDownList的>
< BR />
< BR />
下面的案例将被分配给该选定的军官和放大器; NBSP;
< ASP:DropDownList的ID =DDLpolice=服务器DataTextField =dropdownpoliceDataValueField =dropdownpoliceOnSelectedIndexChanged =DDLpolice_SelectedIndexChanged1的风格=高度:的22px
AppendDataBoundItems =真的AutoPostBack =真>
< ASP:ListItem的值= - 1>选择官和LT; / ASP:ListItem的>
< / ASP:DropDownList的>
 
      
问题是与您的测试内容和垃圾文字。
地址:
#assigngw TD {
自动换行:打破字;
}
这将允许每个单元格的长句不适合,将停止增加网格视图的规模突破。
修改
试试这个
.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>
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
<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%的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!