C# 如何让我的 gridview 100% 适合页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17338904/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how do i make my gridview to fit 100% on page
提问by Teo Chuen Wei Bryan
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%.
如何让我的 gridview 很好地适应屏幕。我添加了这个属性 width="100%" i。但是，我的 gridview 仍然超出了我已将其设置为 100% 的标题宽度。
Here are my source code of my gridview for the first attempt.
这是我第一次尝试的 gridview 的源代码。
<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
我尝试使用这样的 css 方法
<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 :
CSS代码：
#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>
采纳答案by webnoob
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.
这里的关键是table-layout: fixed;因为它强制单元格适合表格而不是表格扩展以适合单元格。
Updated jsFiddle
更新了jsFiddle
回答by Magnus
It is the long text without space in the row that is pushing the grid out. You need to add this style attribute word-wrap:break-word;to the cell if you want the text to break.
行中没有空格的长文本将网格推出。word-wrap:break-word;如果您希望文本中断，则需要将此样式属性添加到单元格。
回答by Simpa
You can also put your gridview in a div, like this<div style="width:100%;overflow:scroll;">
<i>your gridview here</i>
</div>
With this, the gridview doesn't extend beyond page width. But the user will scroll vertically across page to view all gridview contents.
你也可以把你的gridview放在一个div中，像<div style="width:100%;overflow:scroll;">
<i>your gridview here</i>
</div>
这样，gridview不会超出页面宽度。但是用户将垂直滚动页面以查看所有 gridview 内容。
回答by JIYAUL MUSTAPHA
<style type="text/css">
.tblgridview {
width: 100%;
word-wrap: break-word;
table-layout: fixed;
font-size: smaller;
overflow: scroll;
}
</style>
