我正在向包含asp:DropDownList的<td>添加一个下一步和上一步按钮.
当我这样做时，<td>会溢出桌子的宽度.
代码片段(编辑为包括整个表以避免混淆):
<table class="DataEntry" border="1">
<caption>Adding New Record</caption>
<tr>
<th scope="col" colspan="3"> Add To Invoice </th>
</tr>
<tr>
<td colspan="3" >
<div style="white-space:nowrap;">
<asp:ImageButton ID="PreviousInvoiceAdding" runat="server" ImageUrl="~/Images/Previous16x16.png" OnClick="PreviousInvoice_Click" ToolTip="Previous" />
<asp:DropDownList ID="DropDownListInvoice" runat="server" AutoPostBack="true" CssClass="rMidiEntrySelect" OnSelectedIndexChanged="DropDownListInvoice_SelectedIndexChanged" />
<asp:ImageButton ID="NextInvoiceAdding" runat="server" ImageUrl="~/Images/Next16x16.png" OnClick="NextInvoice_Click" ToolTip="Next" />
</div>
</td>
</tr>
<tr>
<th scope="col"> Cost </th>
<th scope="col" colspan="2"> Date Purchased </th>
</tr>
<tr>
<td>
<asp:TextBox ID="Cost" runat="server" CssClass="rMidiEntryText" MaxLength="8"/>
</td>
<td colspan="2">
<div style="text-align: center">
<asp:Label ID="DatePurchased" runat="server" class="rMidiEntryLabel"/>
</div>
</td>
</tr>
<tr>
<th scope="col"> Volume Type </th>
<th scope="col"> Measurement </th>
<th scope="col"> Units </th>
</tr>
<tr>
<td>
<select ID="SelectVolumeType" name="Measurement" runat="server" class="rMidiEntrySelect" disabled >
<option value="0">Liquid</option>
<option value="1">Weight</option>
</select>
</td>
<td>
<asp:DropDownList ID="SelectMeasurement" runat="server" AutoPostBack="true" CssClass="rMidiEntrySelect" />
</td>
<td>
<asp:TextBox ID="Units" runat="server" CssClass="rMidiEntryText" />
</td>
</tr>
<tr>
<th scope="col" colspan="3"> Invoice Reference </th>
</tr>
<tr>
<td colspan="3">
<asp:TextBox ID="InvoiceRef" runat="server" CssClass="rMidiEntryText" MaxLength="100"/>
</td>
</tr>
</table>
结果:
<table>上的class="DataEntry"和asp:DropDownList上的CssClass="rMidiEntrySelect"没有造成任何问题(我已经将它们剥离出来进行验证).
我试过几种不同的机型，比如没有<div>的<td colspan="3" style="white-space:nowrap;">，但没有成功.
不使用上一步和下一步按钮:
<table class="DataEntry" border="1">
<caption>Adding New Record</caption>
<tr>
<th scope="col" colspan="3"> Add To Invoice </th>
</tr>
<tr>
<td colspan="3" >
<asp:DropDownList ID="DropDownListInvoice" runat="server" AutoPostBack="true" CssClass="rMidiEntrySelect" OnSelectedIndexChanged="DropDownListInvoice_SelectedIndexChanged" />
</td>
</tr>
.
.
.
</table>
根据要求提供相关的css:
table.DataEntry {
border-color: #00274C;
border-style: solid;
border-width: 2px;
border-collapse: collapse;
padding: 4px;
color: white;
font-size: 10pt;
}
table.DataEntry caption {
background-color: #004280;
color: #FFD11A;/* #FFCB05;*/
border-color: #00274C;
border-style: solid;
border-width: 2px;
border-collapse: collapse;
padding: 4px;
font-weight: bold;
font-size: 12pt;
white-space: nowrap;
text-decoration: underline;
text-underline-position: under;
text-align:center;
caption-side: top;
vertical-align: top;
}
table.DataEntry th {
background-color: #00274C;
color: #FFCB05;
text-align:center;
}
.rMidiEntryLabel {
width: 100%;
color: white;
background-color: black;
padding-left: 4px;
padding-right: 2px;
border-style: none;
text-align: center !important;
}
.rMidiEntryText {
width: 100%;
color: white;
background-color: black;
padding-left: 4px;
padding-right: 2px;
border-style: none;
text-align: center !important;
}
.rMidiEntrySelect {
width: 100%;
color: white;
background-color: black;
padding-left: 4px;
padding-right: 2px;
text-align: center !important;
}
Css的其余部分都是自举的(我不认为这是相关的).
请求的HTML输出(在我看来很好):
<tr>
<td colspan="3" >
<div style="white-space:nowrap;">
<input type="image" name="ctl00$MainContent$PreviousInvoiceAdding" id="MainContent_PreviousInvoiceAdding" title="Previous" src="Images/Previous16x16.png" />
<select name="ctl00$MainContent$DropDownListInvoice" onchange="javascript:setTimeout('__doPostBack(\'ctl00$MainContent$DropDownListInvoice\',\'\')', 0)" id="MainContent_DropDownListInvoice" class="rMidiEntrySelect">
<option selected="selected" value="ee29b399-34a7-4024-819d-790c9903d4b5~12/11/2023 12:00:00 PM">PayPal: 53S99726XA966511X Brian Garmins Jr.</option>
<option value="3013ce76-18e3-4458-b4c0-1c17ca46a503~11/28/2023 12:00:00 PM">PayPal: 6F945766E4687834E Nelson Laquindanum</option>
<option value="722137b5-3201-408a-bd90-9cac6d72829f~11/23/2023 12:00:00 PM">Amazon 111-3584319-8686651</option>
<option value="4aee9017-8930-4028-ad3f-ff1c494e91bb~10/30/2023 12:00:00 PM">PayPal: 8FL63970TJ5988418 Shake Ums</option>
<option value="b9995175-f516-4366-9b30-32f03830c724~10/25/2023 12:00:00 PM">PayPal: 4WR12564FW882444X Brett Shumock</option>
<option value="ec0f668b-1fe7-4424-9264-fc0825b9e999~10/18/2023 12:00:00 PM">PayPal: 6L091961CE7545104 Brandon Reigert</option>
</select>
<input type="image" name="ctl00$MainContent$NextInvoiceAdding" id="MainContent_NextInvoiceAdding" title="Next" src="Images/Next16x16.png" />
</div>
</td>
</tr>
我问我的问题是因为我看到的结果似乎违反了基本的HTML规则. Td是tr的子元素. Tr是TABLE的子元素. 桌子是一个"容器"，里面装着一切. 表中的任何内容都不应超过表的边界.
