关于datagrid的大小？

Question

datagrid放在一个<table></table> 中
但datagrid中无记录或记录很少时，datagrid会占满整个table，每个cell都很大，很难看
记录很多时就不会这样了 就很正常了请问怎么让记录很少时，datagrid的样式也很好看？

Answer 1

<TABLE WIDTH="100%" CELLPADDING="0" CELLSPACING="0">
<TR>
<TD VALIGN="top" ALIGN="middle">
<DIV STYLE="OVERFLOW: auto;WIDTH: 100%;HEIGHT: 365px">
<ASP:DATAGRID ID="dg_MstArea" RUNAT="server" CSSCLASS="DATAGRID_DEFAULT" WIDTH="100%" AUTOGENERATECOLUMNS="False" ALLOWSORTING="True" ALLOWPAGING="True" PAGESIZE="10" CELLPADDING="1">
<ALTERNATINGITEMSTYLE HORIZONTALALIGN="Center" CSSCLASS="Result_DG_AlternatingItemStyle" />
<ITEMSTYLE HORIZONTALALIGN="Center" CSSCLASS="Result_DG_ItemStyle" />
<HEADERSTYLE HORIZONTALALIGN="Center" CSSCLASS="Result_DG_HeaderStyle" />
<EDITITEMSTYLE HORIZONTALALIGN="Center" CSSCLASS="Result_DG_EditItemStyle" />
<COLUMNS>
<ASP:TEMPLATECOLUMN HEADERTEXT="Delete" ITEMSTYLE-WIDTH="5%">
<ITEMTEMPLATE>
<ASP:IMAGEBUTTON ID="btn_DgDelete" RUNAT="server" IMAGEURL="images/delete.gif" COMMANDNAME="Delete" ALTERNATETEXT="Text" />
</ITEMTEMPLATE>
</ASP:TEMPLATECOLUMN>
<ASP:TEMPLATECOLUMN HEADERTEXT="Area Code" ITEMSTYLE-WIDTH="10%" SORTEXPRESSION="AREA_CODE">
<ITEMTEMPLATE>
<UC1:AREACODEDPL ID="dpl_dgAreaCode" RUNAT="server"></UC1:AREACODEDPL>
<INPUT ID="hid_DgArea" STYLE="WIDTH: 1px; HEIGHT: 1px" TYPE="hidden" VALUE='<%#DataBinder.Eval(Container, "DataItem.AREA_CODE")%>' RUNAT="server" NAME="hid_DgArea">
</ITEMTEMPLATE>
</ASP:TEMPLATECOLUMN>
<ASP:TEMPLATECOLUMN HEADERTEXT="Country Name" ITEMSTYLE-WIDTH="10%" SORTEXPRESSION="COUNTRY_NAME">
<ITEMTEMPLATE>
<asp:TextBox ID="txt_dgCountryName" MaxLength="20" Runat="server" Width="145" CssClass="TextBoxStyle" TEXT='<%#DataBinder.Eval(Container, "DataItem.COUNTRY_NAME")%>' />
</ITEMTEMPLATE>
</ASP:TEMPLATECOLUMN>
<ASP:TEMPLATECOLUMN HEADERTEXT="Country Name SC" ITEMSTYLE-WIDTH="12%" SORTEXPRESSION="COUNTRY_NAME_SC">
<ITEMTEMPLATE>
<asp:TextBox ID="txt_dgCountryNameSc" MaxLength="20" Runat="server" Width="145" CssClass="TextBoxStyle" TEXT='<%#DataBinder.Eval(Container, "DataItem.COUNTRY_NAME_SC")%>' />
</ITEMTEMPLATE>
</ASP:TEMPLATECOLUMN>
<ASP:TEMPLATECOLUMN HEADERTEXT="Country Name TC" ITEMSTYLE-WIDTH="12%" SORTEXPRESSION="COUNTRY_NAME_TC">
<ITEMTEMPLATE>
<asp:TextBox ID="txt_dgCountryNameTc" MaxLength="20" Runat="server" Width="145" CssClass="TextBoxStyle" TEXT='<%#DataBinder.Eval(Container, "DataItem.COUNTRY_NAME_TC")%>' />
</ITEMTEMPLATE>
</ASP:TEMPLATECOLUMN>
<ASP:TEMPLATECOLUMN HEADERTEXT="Effective Date" ITEMSTYLE-WIDTH="15%" SORTEXPRESSION="EFF_DATE">
<ITEMTEMPLATE>
<UC1:UC_CalendarText id="uc_dgEffDate" Runat="server" TEXT='<%#DataBinder.Eval(Container, "DataItem.EFF_DATE_SHOW")%>'>
</UC1:UC_CalendarText>
</ITEMTEMPLATE>
</ASP:TEMPLATECOLUMN>
<ASP:TEMPLATECOLUMN HEADERTEXT="Last Update User" ITEMSTYLE-WIDTH="15%" SORTEXPRESSION="UPDT_UID">
<ITEMTEMPLATE>
<asp:Label ID="lbl_dgLastUpUser" Runat="server" Width="100%" CssClass="LabelStyle" TEXT='<%#DataBinder.Eval(Container, "DataItem.UPDT_UID")%>'>
</asp:Label>
</ITEMTEMPLATE>
</ASP:TEMPLATECOLUMN>
<ASP:TEMPLATECOLUMN HEADERTEXT="Last Update Date" ITEMSTYLE-WIDTH="15%" SORTEXPRESSION="UPDT_DATE">
<ITEMTEMPLATE>
<asp:Label ID="lbl_dgLastUpDate" Runat="server" Width="100%" CssClass="LabelDateStyle" TEXT='<%#DataBinder.Eval(Container, "DataItem.UPDT_DATE")%>'>/></asp:Label>
</ITEMTEMPLATE>
</ASP:TEMPLATECOLUMN>
</COLUMNS>
<PAGERSTYLE HORIZONTALALIGN="Left" POSITION="Top" CSSCLASS="Result_DG_PagerFooterStyle" MODE="NumericPages"></PAGERSTYLE>
</ASP:DATAGRID>
</DIV>
</TD>
</TR>
</TABLE>

Answer 2

把datagrid里的宽度和高度都去掉那样它就会自适应的

Answer 3

我发觉 silverseven7() 这位仁兄回答别人的问题总是贴上在大堆的代码... julong88(村长说得对,
web页的width和height有时很烦的,它会自动给你加上去,有时候页面错位了还不知道怎么回事.

Answer 4

/********************************高度问题*************************/在PageIndexChanged事件后面使用下列代码(其中15是行的高度):
DataGrid.DataBind();
DataGrid.Height=(DataGrid.Items.Count+1)*15;/********************************宽度问题**************************/1.在DataGrid的属性编辑器中分配每一列的宽度;
2.在DataGrid的ItemDataBound事件中添加下列代码:
if(e.Item.ItemType==ListItemType.Item||e.Item.ItemType==ListItemType.AlternatingItem)
{
//较长字段按指定显示宽度截断,如果截断当获得焦点显示Hint
if(StringClass.GetStringLength(e.Item.Cells[1].Text)>30)
{
e.Item.Cells[1].ToolTip=e.Item.Cells[1].Text; }
                               //以下代码实现按指定宽度截断,并显示"...",其中width是相应列的宽度
e.Item.Cells[1].Text="<span style=\"width:210px;height:15px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap\">"+e.Item.Cells[1].Text+"</span>";
if(StringClass.GetStringLength(e.Item.Cells[2].Text)>40)
{
e.Item.Cells[2].ToolTip=e.Item.Cells[2].Text;
}
e.Item.Cells[2].Text="<span style=\"width:320px;height:15px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap\">"+e.Item.Cells[2].Text+"</span>";
}