我有这个页面,它显示了一个 16 列的网格视图。这个 gridview 是水平滚动的,是用 CSS 设计的。我的问题是,每当我尝试设置宽度时,ItemStyle-Width 和 HeaderStyle-Width 都不会影响宽度。
这是我的CSS:
.mGrid {
background-color: #fff;
margin: 5px 0 10px 0;
border: solid 1px #525252;
border-collapse:collapse;
font-family: Calibri;
font-size: 12px;
white-space:nowrap;
table-layout:auto;
}
.hideGridColumn
{
display:none;
}
.mGrid td {
padding: 2px;
border: solid 1px #c1c1c1;
color: #717171;
white-space:nowrap;
table-layout:auto;
font-family: Microsoft Sans Serif;
font-size: 0.9em;
}
.mGrid th {
padding: 4px 2px;
color: #fff;
background: #424242 url(grd_head.png) repeat-x top;
border-left: solid 1px #525252;
font-size: 0.9em;
font-family: Microsoft Sans Serif;
text-align: center;
}
.mGrid .alt { background: #fcfcfc url(grd_alt.png) repeat-x top; }
.mGrid .pgr { background: #424242 url(grd_pgr.png) repeat-x top; }
.mGrid .pgr table { margin: 5px 0; }
.mGrid .pgr td {
border-width: 0;
padding: 0 6px;
border-left: solid 1px #666;
font-weight: bold;
color: #fff;
line-height: 12px;
}
.mGrid .pgr a { color: #666; text-decoration: none; }
.mGrid .pgr a:hover { color: #000; text-decoration: none; }
.GridDock
{
overflow-x: auto;
overflow-y: hidden;
width: 200px;
padding: 0 0 17px 0;
}
以及 ASP.net 代码的摘录:
<div id="dvScreenWidth" visible="false">
<div class="GridDock" id="dvGridWidth">
<asp:GridView ID="gvResults" runat="server"
GridLines="None"
CssClass="mGrid" AutoGenerateColumns="false"
AllowPaging="true" PagerStyle-CssClass="pgr"
PageSize="30">
<PagerSettings Position="Top" />
<PagerStyle CssClass="pgr" />
<Columns>
<asp:BoundField DataField="DateAndTimeInspected" ItemStyle-Height="35" HeaderStyle-Height="35" HeaderText="INSPECTION TIMESTAMP" SortExpression="DateAndTimeInspected" />
<asp:BoundField DataField="QA Inspector" ItemStyle-Height="35" HeaderStyle-Height="35" HeaderText="QA INSPECTOR" SortExpression="QA Inspector" />
<asp:BoundField DataField="FT_TESTED/UNTESTED" ItemStyle-Height="35" HeaderStyle-Height="35" HeaderText="TESTED / UNTESTED" SortExpression="FT_TESTED/UNTESTED" />
<asp:BoundField DataField="productname" ItemStyle-Height="35" HeaderStyle-Height="35" HeaderText="DEVICE" SortExpression="productname" />
<asp:BoundField DataField="containername" ItemStyle-Height="35" HeaderStyle-Height="35" HeaderText="LOT NUMBER" SortExpression="containername" />
<asp:BoundField DataField="packagetype" ItemStyle-Height="35" HeaderStyle-Height="35" HeaderText="PACKAGE TYPE" SortExpression="packagetype" />
<asp:BoundField DataField="datecode" ItemStyle-Height="35" HeaderStyle-Height="35" HeaderText="DATE CODE" SortExpression="datecode" />
<asp:BoundField DataField="assysite" ItemStyle-Height="35" HeaderStyle-Height="35" HeaderText="ASSEMBLY SITE" SortExpression="assysite" />
<asp:BoundField DataField="FT_SUBCON_TEST" ItemStyle-Height="35" HeaderStyle-Height="35" HeaderText="FINAL TEST SITE" SortExpression="FT_SUBCON_TEST" />
<asp:BoundField DataField="moveoutqty" ItemStyle-Height="35" HeaderStyle-Height="35" HeaderText="LOT QUANTITY" SortExpression="moveoutqty" />
<asp:BoundField DataField="FT_IQA_SAMPLE_SIZE" ItemStyle-Height="35" HeaderStyle-Height="35" HeaderText="SAMPLE SIZE" SortExpression="FT_IQA_SAMPLE_SIZE" />
<asp:BoundField DataField="FT_IQA_SAMPLE_REJECT" ItemStyle-Height="35" HeaderStyle-Height="35" HeaderText="SAMPLE REJECT" SortExpression="FT_IQA_SAMPLE_REJECT" />
<asp:BoundField DataField="FT_REJECT CATEGORY" ItemStyle-Height="35" HeaderStyle-Height="35" HeaderText="REJECT CATEGORY" SortExpression="FT_REJECT CATEGORY" />
<asp:BoundField DataField="FT_IQA_DISPOSITION" ItemStyle-Height="35" HeaderStyle-Height="35" HeaderText="IQA DISPOSITION" SortExpression="FT_IQA_DISPOSITION" />
<asp:BoundField DataField="FT_DMR#" ItemStyle-Height="35" HeaderStyle-Height="35" HeaderText="DMR NUMBER" SortExpression="FT_DMR#" />
<asp:BoundField DataField="Remarks" ItemStyle-Height="35" HeaderStyle-Height="35" HeaderText="REMARKS" SortExpression="Remarks" />
</Columns>
</asp:GridView>
</div>
</div>
<script type="text/javascript">
function thirty_pc() {
var height = $(window).height();
var thirtypc = (100 * (height - 167)) / 100;
thirtypc = parseInt(thirtypc) + 'px';
$("#divContent").css('height', thirtypc);
}
$(document).ready(function() {
thirty_pc();
$(window).bind('resize', thirty_pc);
});
$(document).keypress(function(event) {
if (event.which == 13) {
$("#ctl00_cphContent_searchFilter_btnSearch").focus();
$("#ctl00_cphContent_searchFilter_btnSearch").click();
}
});
$(document).ready(function() {
$('#dvGridWidth').width($('#dvScreenWidth').width());
});
</script>
我将非常感谢您能给我的任何帮助。太感谢了。