Question

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

我尝试过：

我有一个包含内容占位符的母版页。我使用

设置包含内容占位符的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>

但这没有效果。

由于

P.S。这是我的内容占位符代码

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

P.S.S。相关的主页面代码：

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

Answer 1

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

风格= “显示：表”

如何在不滚动的情况下让我的div容器适合我的表的大小？

1 个答案: