1

为了确保我尽可能清楚，我有一个包含内容占位符的母版页。在内容占位符里面我有一张桌子。我希望表格足够大，以允许列中的所有内容都在一行上，但我不希望它比这更大。一旦表格大小合适，我希望容器/页面缩小到表格上，这样就没有随机空白。有人对如何正确完成此操作有任何想法吗？

我试过的：

我有一个带有内容占位符的母版页。我设置了包含内容占位符的 div

style="display:inline-block"

这会将容器缩小到内容占位符内部的大小。在我想重新格式化内容占位符内的表格之前，这工作得很好。我不喜欢收缩是如何在有空白的任何时候强制我表中的元素换行的。所以我加了

style="white-space:nowrap"

到我的各个列，这给了我想要的效果，让我的所有列占据一行/行，并且容器很好地缩小到我的桌子上，直到我完成最后一个

style="white-space:nowrap"

在我的最后一个专栏。我意识到容器没有根据我是否使用而改变大小

style="white-space:nowrap"

或不。容器已经缩小了一个固定的量，每次我通过防止包装使一列变宽时，桌子都会越来越接近我的页面边缘。然后，当我打开我的最后一列时，表格越过了页面。我添加了

style="overflow:auto"

这让我可以看到我的整个表格，但我不想滚动，并且页面有足够的空间在窗口中伸展以容纳我的表格而无需滚动。我也做过

style="width:100%"

但这并没有给我想要的效果，因为这样容器就不会在桌子周围缩小，而且我觉得桌子当时太宽了。我也试过

<div style="clear: both;"></div>

但这没有任何效果。

谢谢

PS这是我的内容占位符代码

    <div style="padding-left:40px;float:left;">
        <table class="table table-bordered; span7">
        <%--<col span="4" style="width:auto; white-space:nowrap" />--%>
            <caption style="padding-top:20px; font-size: xx-large">
                <asp:Label ID="Label16" runat="server" ForeColor="#003a6f" BackColor="#fcf8e3"
            Text="Companies"></asp:Label></caption>
            <thead>
                <tr>
                    <%--<th>
                    User ID
                </th>--%>
                    <th style="">
                        <asp:Label ID="Label2" runat="server" ForeColor="#003a6f" Font-Bold="true"
            Text="Company&nbsp;ID"></asp:Label>

                    </th>
                    <th style="">
                        <asp:Label ID="Label5" runat="server" ForeColor="#003a6f" Font-Bold="true"
            Text="Company&nbsp;Name"></asp:Label>

                    </th>
                    <th style="">
                        <asp:Label ID="Label1" runat="server" ForeColor="#003a6f" Font-Bold="true"
            Text="Company&nbsp;Phone"></asp:Label>

                    </th>
                    <th style="">
                        <asp:Label ID="Label3" runat="server" ForeColor="#003a6f" Font-Bold="true"
            Text="Company&nbsp;Status"></asp:Label>

                    </th>
                </tr>
            </thead>
            <tbody>
                <%  Project1.Master m = new Project1.Master();
                    m.Companies = m.viewCompanies();

                    int count = 0;
                    foreach (Project1.Company c in m.Companies)
                    {
                        if (count % 2 == 0)
                        {
                            //Response.Write("<tr><td>" + u.userID + "</td>");
                            Response.Write("<tr class=\"info\"><td style=\"color:#003a6f; white-space:nowrap\">" + c.companyID + "</td>");
                            Response.Write("<td style=\"white-space:nowrap\">" + "<a class=\"btn-link\" href=\"Company.aspx?cat=" + c.companyName + "\">" + c.companyName + "</a>" + "</td>");
                            Response.Write("<td style=\"color:#003a6f; white-space:nowrap\">" + c.companyPhone + "</td>");
                            Response.Write("<td style=\"color:#003a6f; white-space:nowrap\">" + c.companyStatus + "</td></tr>");
                        }
                        else
                        {
                            Response.Write("<tr class=\"warning\"><td style=\"color:#003a6f; white-space:nowrap\">" + c.companyID + "</td>");
                            Response.Write("<td style=\"white-space:nowrap\">" + "<a class=\"btn-link\" href=\"Company.aspx?cat=" + c.companyName + "\">" + c.companyName + "</a>" + "</td>");
                            Response.Write("<td style=\"color:#003a6f; white-space:nowrap\">" + c.companyPhone + "</td>");
                            Response.Write("<td style=\"color:#003a6f; white-space:nowrap\">" + c.companyStatus + "</td></tr>");
                        }
                        count++;
                    }%>
            </tbody>
        </table>            
    </div>

PSS 相关母版页代码：

    <body style="background-color: #003a6f;text-align: center;">
        <form id="form1" runat="server">
            <div class="container-fluid" style="display:inline-block">
                <div class="row-fluid" style="background-color:White">
                    <div class="span10">
                        <!--Body content-->
                        <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
                        </asp:ContentPlaceHolder>
                        <br />
                    </div>                
                 </div>
             </div>    
         </form>
    </body>
4

1 回答 1

0

我需要做的似乎就是将这行代码添加到围绕我的表格的 div 中

样式=“显示：表”

于 2013-07-11T20:03:41.753 回答