Question

我有这个页面显示一个包含16列的gridview。此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>

我真的很感激你能给我的任何帮助。非常感谢你。

Answer 1

表格中每个单元格的宽度会根据表格的宽度自动调整。尝试在表格中设置固定宽度。

<asp:GridView Width="2000px"

或在CSS

中

.mGrid { 
    width: 2000px;
}

.mGrid td { 
    width: 6.25%; /* 100% / 16 = 6.25 */
}

设置标题的宽度和gridview的单元格

1 个答案: