I need to add next and previous buttons to a <td> that has an asp:DropDownList. However, when I do this, the <td> ends up overflowing the width of the table.
Here is the edited code snippet with the entire table included:
<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>
<t/... other rows .../>...
</table>
Result:
https://i.sstatic.net/3cZIJ.png
The class="DataEntry" on the <table> and the
CssClass="rMidiEntrySelect"asp:DropDownList are not causing any issues (as I have stripped them out to verify).
I have tried a few variations such as
<td colspan="3" style="white-space:nowrap;"><div> with no luck.
Excluding the Previous and Next buttons, the code structure looks like this:
<table class="DataEntry" border="1">
<caption>Adding New Record</caption>
<tr>
<th scope="col" colspan="3"& gt; Add To Invoice </th>
</tr>
<tr>
<td colspan="3" >
<asp:DropDownList ID="DropDownListInvoice" runat="server" AutoPostBack="true" CssClass="rMidiEntrySelect" OnSelectedIndexChanged="DropDownListInvoice_SelectedIndexChanged" />
</td>
.
.
.
</table>
https://i.sstatic.net/squbv.png
Below is the relevant CSS for reference:
//CSS code here
Additional information about my concern:
//HTML output here
I am questioning this setup due to the unexpected behavior that seems to be violating basic HTML rules. The structure should follow a hierarchy where a TD is a child of TR, which in turn is a child of TABLE, ensuring that nothing within the TABLE exceeds its boundaries.