如何使网格视图和单元格更大？答案

【问题标题】：How to make gridview and cells bigger?如何使网格视图和单元格更大？
【发布时间】：2015-06-06 02:59:06
【问题描述】：

我想让我的 ASP 网格视图更宽，单元格更大。我已经尝试了一些带有宽度和单元格间距/单元格填充的 sh*t，但都没有奏效。

网格视图：

<div class="content">
<%-- GridView --%>
<asp:UpdatePanel ID="pnlGVList" runat="server">
    <ContentTemplate>
        <asp:GridView runat="server" ID="gridList" CellPadding="40" ForeColor="#333333" GridLines="None" AutoGenerateColumns="False" DataSourceID="DSList" AllowPaging="True" PageSize="50">

            <AlternatingRowStyle BackColor="White" ForeColor="#284775"></AlternatingRowStyle>

            <Columns>
                <asp:BoundField DataField="positie" HeaderText="Positie" SortExpression="positie"></asp:BoundField>
                <asp:HyperLinkField DataNavigateUrlFields="artiestid" DataNavigateUrlFormatString="Artists.aspx?id={0}" DataTextField="naam" HeaderText="Naam" />
                <asp:HyperLinkField DataNavigateUrlFields="songid" DataNavigateUrlFormatString="Song.aspx?id={0}" DataTextField="titel" HeaderText="Titel" />
                <asp:BoundField DataField="jaar" HeaderText="Jaar" SortExpression="jaar"></asp:BoundField>
            </Columns>

            <EditRowStyle BackColor="#999999"></EditRowStyle>
            <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White"></FooterStyle>
            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White"></HeaderStyle>
            <PagerStyle HorizontalAlign="Center" BackColor="#284775" ForeColor="White"></PagerStyle>
            <RowStyle BackColor="#F7F6F3" ForeColor="#333333"></RowStyle>
            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333"></SelectedRowStyle>
            <SortedAscendingCellStyle BackColor="#E9E7E2"></SortedAscendingCellStyle>
            <SortedAscendingHeaderStyle BackColor="#506C8C"></SortedAscendingHeaderStyle>
            <SortedDescendingCellStyle BackColor="#FFFDF8"></SortedDescendingCellStyle>
            <SortedDescendingHeaderStyle BackColor="#6F8DAE"></SortedDescendingHeaderStyle>
        </asp:GridView>
    </ContentTemplate>
</asp:UpdatePanel>

<asp:SqlDataSource runat="server" ID="DSList" ConnectionString='<%$ ConnectionStrings:TOP2000_IAO4A_GROEP2ConnectionString %>' SelectCommand="sp_top2000_year" SelectCommandType="StoredProcedure">
    <SelectParameters>
      <asp:ControlParameter ControlID="ddlJaar" PropertyName="SelectedValue" DefaultValue="" Name="YEAR" Type="Int32"></asp:ControlParameter>
    </SelectParameters>
</asp:SqlDataSource>
  </div>

一些CSS：

#gridList {
margin:50px;
width:2000px;
}

.content {
margin-top: 30px;
margin-left: 300px;
margin-right: 40px;
height: 100vh;
background-color: white;
box-shadow: 0px 0px 1px 1px black;
}

【问题讨论】：

标签： c# css asp.net gridview

【解决方案1】：

您将margin 和paddings 与content css class 一起应用于div，而不是Row。

您可以为您的RowStyle 创建一个css class 并应用如下内容：

<RowStyle CssClass="myRowStyleClass"></RowStyle>

并从GridView 中删除CellPadding。

【讨论】：

【解决方案2】：

您可以尝试以下方法：

#gridList {
margin:50px;
width:95%;
}
#gridList td { width:20%; padding: 5px;}

或者您可以单独设置每列的相对宽度（td 元素），例如：

td:first-child {width:15%;}
td:last-child {width:16%;}
td:nth-child(2) {width:25%;}

（回复：http://www.codeproject.com/Tips/262546/HTML-Tables-formating-best-practices）。

希望这可能会有所帮助。

【讨论】：