使用 CSS 格式化 GridView答案

【问题标题】：Format GridView with CSS使用 CSS 格式化 GridView
【发布时间】：2013-07-21 11:22:50
【问题描述】：

我有一个页面，它附有那个图像。在我的 css 中，我将宽度和高度配置为自动显示表格！但是在某些列中，例如，不会在在线行中显示所有信息。如何配置我的 Grid 以在一行中显示所有行？

我的aspx：

<body>
<form id="form1" runat="server">
<div>
    <div style="width: auto; height: auto;" align="center">
        <img src="image/NdriveBanner.png" align="center" />
    </div>
    <br />
    <br />
    <div id="Div1" runat="server">
        <asp:Label Font-Bold="true" runat="server" Font-Size="X-Large">Here are your tickets!</asp:Label>
        <br />
        <br />
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" GridLines="None"
            CssClass="table table-bordered table-striped">
            <Columns>
                <asp:BoundField DataField="UserName" HeaderText="User" />
                <asp:BoundField DataField="AccessGroup" HeaderText="Access Group" />
                <asp:BoundField DataField="FolderAccess" HeaderText="Folder Access" />
                <asp:BoundField DataField="RequestDate" HeaderText="Request Date" DataFormatString="{0:d}" />
                <asp:BoundField DataField="SituationDesc" HeaderText="Situation" />
                <asp:BoundField DataField="Approver" HeaderText="Approver" />
                <asp:BoundField DataField="ApprovalDate" HeaderText="Approval Date" DataFormatString="{0:d}" />
                <asp:BoundField DataField="BusinessJustification" HeaderText="Business Justification" />
                <asp:BoundField DataField="Server" HeaderText="Server Name" />
                <asp:BoundField DataField="UserRequestor" HeaderText="User Request" />
                <asp:TemplateField Visible="false">
                    <ItemTemplate>
                        <asp:HiddenField ID="Access" runat="server" Value='<%# Bind("Access") %>' />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>
    <br />
    <br />
    <div align="center" style="width: auto; height: auto;">
        <asp:HyperLink ID="HyperLink2" runat="server" ImageUrl="~/image/home_back_48.png"
            NavigateUrl="~/home.aspx">homepage</asp:HyperLink>
    </div>
</div>
</form>

我的 .css

table
{
    max-width:none;
    background-color:transparent;
    border-collapse:collapse;
    border-spacing:0;
}

.table
{
    width:auto;
    height:auto;
    margin-bottom:20px;
}

.table th,.table td
{
    width:auto;
    height:auto;
    padding:8px;
    line-height:20px;
    text-align:left;
    vertical-align:top;
    border-top:1px solid #dddddd;
}

.table th
{
    width:auto;
    height:auto;
    font-weight:bold;
}

.table thead th
{
    vertical-align:bottom;
}

【问题讨论】：

这与 CSS 无关。这是表格单元格中内容量的问题。可能的解决方案是：单元格内容更少，字体更小，单元格宽度更大。
空间不足，无法在一行中显示所有内容。水平滚动可能会有所帮助，但水平滚动有点奇怪。通常，我们会显示几列并添加展开/折叠按钮以获取详细信息。
但是如果我将宽度设置为自动，即使有很多信息，所有单元格也不应该显示在一行中？我有其他网格，它使用其他 CSS（Telerik 的 Css），并在一行中显示所有信息。但是我不能在同一个页面中使用这个 CSS！
@Win 如果我使用水平滚动，如何构建它？

标签： c# asp.net .net css

【解决方案1】：

尝试将white-space: no-wrap; 添加到您的.table th,.table td 规则中。如果它有效，您将获得一些大单元格，并且需要水平滚动页面才能查看所有内容，这绝不会很有趣。

【讨论】：

其他问题。当我有一个带有 2 个 CheckBox 的 CheckBoxList 时，它会在一行中显示每个复选框。好吧，在这种情况下，我的 CheckBoxList 有 2 行，但我需要在一行中显示。带空格：no-wrap;，不工作。
我会说用display: inline; 或display: inline-block; 设置复选框的样式，但我可能会从你的问题中遗漏一些东西。您能否提供更多信息/示例？
不行！我将所有复选框引用更改为 display: inline 并继续显示在另一个下方。
提供一些代码，以便更好地理解问题。