Format GridView with CSS

Question

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

That has nothing to to with CSS. That is a problem with the amount of content in your table-cell. Possible solutions are: less content in cell, smaller font size, bigger width of cell. — Sven Bieder
– Sven Bieder, Commented Jul 22, 2013 at 16:17
There is not enough space to display all content in a single row. Horizontal scroll might help it, but horizontal scroll is kind of odd. Normally, we display few columns and add a expand/collapse button for details. — Win
– Win, Commented Jul 22, 2013 at 16:19
But if I setting width to auto, all cells don't should show in one line even if having a lot of information? I have other Grid, that use other CSS (Css of Telerik), and show all informations in one line. But I can't use this CSS in this same page! — CaioVJesus89
– CaioVJesus89, Commented Jul 22, 2013 at 16:25

Leite · Accepted Answer · 2013-07-22 16:20:20Z

2

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.

answered Jul 22, 2013 at 16:20

Leite

9946 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

CaioVJesus89 Over a year ago

Other problem. When I have an CheckBoxList with 2 CheckBox, it's show each checkbox in one line. Well, in this case, I have 2 lines to my CheckBoxList, but I need show in one line. With white-space: no-wrap;, not work.

Leite Over a year ago

I would say to style the checkboxes with display: inline; or display: inline-block; but I might be missing something from your question. Can you provide more information/examples?

CaioVJesus89 Over a year ago

Not work! I change all checkbox reference to display: inline and continue show in one beneath the other.

Leite Over a year ago

Provide some code so it's possible to better understand the problem.

Collectives™ on Stack Overflow

Format GridView with CSS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related