CODEWITHSUNDEEP
c#asp.net.netcss
CaioVJesus89
CaioVJesus89

Reputation: 333

Format GridView with CSS

I have an page, that image it's atached. In my css, I config width and height to show table in auto! But in some columns, not show all information in onw line, for example. How I config my Grid to show all rows in one line?

My 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>

My .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;
}

enter image description here

Upvotes: 2

Views: 7168

Answers (1)

Leite
Leite

Reputation: 994

Try adding white-space: no-wrap; to your .table th,.table td rule. If it works you will get some big cells and will need to horizontal-scroll the page to see everything, and that is never fun.

Upvotes: 2

Related Questions