为了确保我尽可能清楚,我有一个包含内容占位符的母版页。内容占位符的内部,我有一张桌子。我希望表格足够大,以允许列中的所有内容都在一行上,但我不希望它大于此值。一旦表格尺寸合适,我希望容器/页面缩小到桌面上,这样就不会出现随机空白。任何人有任何想法如何这是假设正确完成?如何让我的div容器适合我的表的大小而不滚动?
我曾尝试:
我有一个内容占位母版页。我设置了包含内容占位符的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 ID"></asp:Label>
</th>
<th style="">
<asp:Label ID="Label5" runat="server" ForeColor="#003a6f" Font-Bold="true"
Text="Company Name"></asp:Label>
</th>
<th style="">
<asp:Label ID="Label1" runat="server" ForeColor="#003a6f" Font-Bold="true"
Text="Company Phone"></asp:Label>
</th>
<th style="">
<asp:Label ID="Label3" runat="server" ForeColor="#003a6f" Font-Bold="true"
Text="Company 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>