0

16列のグリッドビューを表示するこのページがあります。このグリッドビューは水平方向にスクロール可能で、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>

あなたが私に与えることができるどんな助けにも本当に感謝します. どうもありがとう。

4

1 に答える 1

0

表の各セルの幅は、表の幅に応じて自動的に調整されます。テーブルに固定幅を設定してみてください。

<asp:GridView Width="2000px"

またはCSSで

.mGrid { 
    width: 2000px;
}

.mGrid td { 
    width: 6.25%; /* 100% / 16 = 6.25 */
}
于 2013-11-12T09:48:38.840 に答える