Html 当我的表加载数据时,左表占据整个屏幕,右表被覆盖
我一直有一个相当令人沮丧的问题,失败了很多次,我希望这里的人能帮助我。发生的事情是,页面左侧的这些表看起来很好,并且执行了我编译时应该执行的操作。然而,一旦我将其加载到公司的内部网上并以这种方式加载数据(顺便说一句,数据相同),页面左侧的表格就会在屏幕上爆炸,超出我的工作笔记本电脑(1600x900)的分辨率,而右侧的表格则缩小到其大小的1/4左右 所以,请帮帮我,这让我沮丧了好几个小时。下面是页面的.aspx和样式表。我将只发布最上面的两个面板 ShippingReference.aspxHtml 当我的表加载数据时,左表占据整个屏幕,右表被覆盖,html,css,asp.net,html-table,Html,Css,Asp.net,Html Table,我一直有一个相当令人沮丧的问题,失败了很多次,我希望这里的人能帮助我。发生的事情是,页面左侧的这些表看起来很好,并且执行了我编译时应该执行的操作。然而,一旦我将其加载到公司的内部网上并以这种方式加载数据(顺便说一句,数据相同),页面左侧的表格就会在屏幕上爆炸,超出我的工作笔记本电脑(1600x900)的分辨率,而右侧的表格则缩小到其大小的1/4左右 所以,请帮帮我,这让我沮丧了好几个小时。下面是页面的.aspx和样式表。我将只发布最上面的两个面板 ShippingReference.aspx &
<table style="width: 1000px;">
<tr style="height: 800px;">
<td style="width: 50%; height: 100%;" valign="top">
<asp:Panel runat="server" ID="pnlMainInfo" style="margin:20px; background-color:#ccccff" GroupingText="Main Information:">
<table style="width:100%; height:100%;">
<tr align="center">
<td style="width: 25%;">
<div class="TBox" style="width: 90%; height: 100%;">
<div class="header"> <h2>Terms:</h2> </div>
<asp:TextBox ID="txtTerms" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
</div>
</td>
</tr>
<tr align="center">
<td style="width: 25%;">
<div class="TBox" style="width: 90%; height: 100%;">
<div class="header"> <h2>Acceptable Carriers:</h2> </div>
<asp:TextBox ID="txtCarriers" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
</div>
</td>
</tr>
<tr align="center">
<td style="width: 25%;">
<div class="TBox" style="width: 90%; height: 100%;">
<div class="header"> <h2>Routing/Order Submit Time Line:</h2> </div>
<asp:TextBox ID="txtTimeLine" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
</div>
</td>
</tr>
<tr align="center">
<td style="width: 25%;">
<div class="TBox" style="width: 90%; height: 100%;">
<div class="header"> <h2>Appointment Information Required:</h2> </div>
<asp:TextBox ID="txtAppointmentInformation" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
</div>
</td>
</tr>
<tr align="center">
<td style="width: 25%;">
<div class="TBox" style="width: 90%; height: 100%;">
<div class="header"> <h2>Carton Markings Required:</h2> </div>
<asp:TextBox ID="txtCartonMarkings" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
</div>
</td>
</tr>
<tr align="center">
<td style="width: 25%;">
<div class="TBox" style="width: 90%; height: 100%;">
<div class="header"> <h2>Special Labels Required:</h2> </div>
<asp:TextBox ID="txtSpecialLabels" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
</div>
</td>
</tr>
<tr align="center">
<td style="width: 25%;">
<div class="TBox" style="width: 90%; height: 100%;">
<div class="header"> <h2>Shipping Contacts:</h2> </div>
<asp:TextBox ID="txtShippingContacts" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
</div>
</td>
</tr>
<tr align="center">
<td style="width: 25%;">
<div class="TBox" style="width: 90%; height: 100%;">
<div class="header"> <h2>Routing Website:</h2> </div>
<asp:TextBox ID="txtRoutingWebsite" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
</div>
</td>
</tr>
<tr align="center">
<td style="width: 25%;">
<div class="TBox" style="width: 90%; height: 100%;">
<div class="header"> <h2>Customer Website Instructions/Trouble Shooting:</h2> </div>
<asp:TextBox ID="txtCustWebsite" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
</div>
</td>
</tr>
</table>
</asp:Panel>
<cc1:CollapsiblePanelExtender ID="pnlMainInfo_CollapsiblePanelExtender"
runat="server" Enabled="True" TargetControlID="pnlMainInfo">
</cc1:CollapsiblePanelExtender>
</td>
<td style="width: 50%; height: 100%;" valign="top">
<asp:Panel runat="server" ID="pnlEDI" style="text-align:center; margin:20px; background-color:#ccccff" GroupingText="EDI:">
<table style="width:100%; height:100%;">
<tr align="center">
<td style="width: 25%;">
<div class="TBox" style="width: 90%; height: 100%;">
<div class="header"> <h2>Contact for Missed Pickup by Carrier:</h2> </div>
<asp:TextBox ID="txtMissedPickupContact" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
</div>
</td>
</tr>
<tr align="center">
<td style="width: 25%;">
<div class="TBox" style="width: 90%; height: 100%;">
<div class="header"> <h2>Plant EDI Documents Required:</h2> </div>
<asp:TextBox ID="txtPlantEDI" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
</div>
</td>
</tr>
<tr align="center">
<td style="width: 25%;">
<div class="TBox" style="width: 90%; height: 100%;">
<div class="header"> <h2>DI EDI Documents Required:</h2> </div>
<asp:TextBox ID="txtDirectImportEDI" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
</div>
</td>
</tr>
<tr align="center">
<td style="width: 25%;">
<div class="TBox" style="width: 90%; height: 100%;">
<div class="header"> <h2>Import/Direct Import ISF Requirements:</h2> </div>
<asp:TextBox ID="txtISFRequirements" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
</div>
</td>
</tr>
<tr align="center">
<td style="width: 25%;">
<div class="TBox" style="width: 90%; height: 100%;">
<div class="header"> <h2>Import/Direct Import Customer Broker/Notify Party:</h2> </div>
<asp:TextBox ID="txtCustomerBroker" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
</div>
</td>
</tr>
<tr align="center">
<td style="width: 25%;">
<div class="TBox" style="width: 90%; height: 100%;">
<div class="header"> <h2>Other Shipping Documents Required:</h2> </div>
<asp:TextBox ID="txtOtherShippingDocuments" runat="server" TextMode="MultiLine" Rows="5" MaxLength="500" Width="93%" CssClass="text" />
</div>
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
尝试先清理一下页面,然后“调试”应该会更容易:
- 将所有样式放在样式表中,特别是重复的
-属性宽度
- 删除不必要的/冗余的标记,即用
定义的样式应仅在
标记上设置
我知道这不是你想要的答案,但它肯定能帮你解决问题。或者至少让您的示例代码更易于阅读-对于其他人来说。:) 啊。。。。将表格更改为DIVs…我在IE、Chrome、Mozilla中检查了您的代码。对我来说,它似乎工作正常。我的系统屏幕分辨率是1280*800。最好创建一个主分区。使其宽度:100%。然后在该分区内创建两个表。每个表的宽度为50%。不要使用太多的宽度属性
body { text-align:center; }
.lblErrorMessage { font-family: Tahoma; font-size: 9pt; color: red; }
.TBox {
color:#333333;
font-size:11px;
background: url('../../Images/box_bottom_right.gif') no-repeat bottom right;
margin: 0;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
.TBox .header {
margin: 0;
padding: 0;
background: url('../../Images/box_top_right.png') no-repeat top right;
text-align: center;
}
.TBox .header h2 {
color:#ffffff;
background: url('../../Images/box_top_left.png') no-repeat top left;
font-size:14px;
padding-top: 7px;
height:20px;
margin: 0;
}
.TBox .text {
background: url('../../Images/box_bottom_left.gif') no-repeat bottom left;
padding:10px 10px 15px 10px;
margin:0;
height:auto;
text-align:justify;
color:#003399;
line-height:15px;
}