Почему мои ряды в колонках внезапно прыгают вправо? И как мне это исправить?

Question

Добрый день. Поэтому, пытаясь добавить несколько полей даты во всплывающее окно на сайте, которое я делаю, я испытал нечто странное. Добавление этих трех строк в всплывающее окно привело к тому, что столбец, который они предположили, должен был прыгать вправо, и теперь я не могу заставить их выстраиваться в линию.

Я не знаю, как это важно отметить, но есть текстовое поле слева от столбца, но добавляемые поля/строки будут ниже высоты текстового поля.

Ниже я попытался взять кусочек кода в качестве примера, если оно достаточно, я попытаюсь добавить больше:

<table style="float: left;"> 
<tr> 
<div> 
    <tr>(the following code shows normally like it should) 
     <td align="left" valign="top" colspan="4">Lable:</td> 
    </tr> 
    <tr> 
     <td width="2px"></td> 
     <td align="left" valign="top">Label</td> 
     <td colspan="3"> 
       <telerik:RadDatePicker ID="RDP1" runat="server" 
     Culture="Language" 
     DbSelectedDate='<%# (Container is GridEditFormInsertItem)? DateTime.Today : Eval("EVAL1") %>' 
     Width="145px"> 
       <Calendar ID="Calendar3" runat="server" UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" ViewSelectorText="x"> 
      </Calendar> 
       <DatePopupButton HoverImageUrl="" ImageUrl="" /> 
       <DateInput ID="DateInput3" runat="server" DateFormat="dd-MM-yyyy" DisplayDateFormat="dd-MM-yyyy"> 
       </DateInput> 
       </telerik:RadDatePicker> 
     </td> 
    </tr> 
    <tr> 
     <td></td> 
     <td colspan="3">Label</td> 
    </tr> 
    <tr> 
     <td></td> 
     <td align="left" valign="top">Label:</td> 
     <td align="left" valign="top" colspan="3"> 
     <telerik:RadDatePicker ID="RDP2" runat="server" Culture="Language" DbSelectedDate='<%# Eval("EVAL2") %>' Width="170px"> 
     <Calendar ID="Calendar5" runat="server" UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" ViewSelectorText="x"> 
     </Calendar> 
     <DateInput ID="DateInput5" runat="server" DateFormat="dd-MM-yyyy" DisplayDateFormat="dd-MM-yyyy"> 
     </DateInput> 
     </telerik:RadDatePicker> 
     <asp:ImageButton ID="btnDelete" runat="server" ImageUrl="url" OnClick="btnFunction_Click" ToolTip="Text" Style="vertical-align:middle;" /> 
     </td> 
    </tr> 
</div> 
</tr> 

Для тех, кто хотел бы видеть CSS, нет ни , по крайней мере, ни один из них не повлияет на мою проблему, поскольку они указывают больше на фактическую веб-страницу, а не на всплывающее окно.

Заранее благодарим за помощь и ваше время.

Answer 1

Проблема возникает потому, что ваши строки не имеют равное количество <td> или столбцов

Первый ряд - 1 td с colspan 4> общий 4

Второй ряд - 1 td + 1 td + 1 td с colspan 3> всего 5

Третий ряд - 1 td + 1 td с colspan 3> всего 4

Четвертый ряд - 1 td + 1 td + 1 td с colspan 3> общий 5

Answer 2

Ваш стол не в правильной структуре (у вас есть тр в тд)

Убедитесь, что ваш стол находится в следующая структура:

<table> 
    <tr> 
    <td> 

Также проверьте ваши колонки все равно, использование = Объединение столбцов «», если это необходимо для слияния клеток.

<table> 
<tr> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
</tr> 
<tr> 
    <td colspan="4"></td> 
</tr> 
<table>