Форма таблицы шириной между меткой и текстовым полем ввода

Question

Что-то не так с дизайном моей формы, как показано ниже.

<div class="myRegInfoForm"> 
      <form method="POST" action="action_reg.php"> 
       <table> 
        <tr> 
         <td> 
          <label>Name: </label> 
         </td> 
         <td> 
          <input type="text" name="regname" value="" id="regname" required pattern="[A-Za-z_ ]{1,}" title="Only letters allowed."/> 
         </td> 
        </tr> 
        <tr> 
         <td> 
          <label>Course applied for: </label> 
          <label><?php echo $CourseName ?></label> 

       </table> 
      </form> 
    </div> 

Широкое пространство между текстовым полем этикетки и ввода после добавления второго <td> элемент, и я не знаю, почему. Может кто-нибудь мне помочь?

.myRegInfoForm { 
    display:flex; 
    justify-content:center; 
    align-items:center; 
} 

Мой требуемый выход:

Answer 1

Набор text-align для td в right

.myRegInfoForm { 
 
    display:flex; 
 
    justify-content:center; 
 
    align-items:center; 
 
} 
 

 
.myRegInfoForm td{ 
 
    text-align: right; 
 
}

<div class="myRegInfoForm"> 
 
      <form method="POST" action="action_reg.php"> 
 
       <table> 
 
        <tr> 
 
         <td> 
 
          <label>Name: </label> 
 
         </td> 
 
         <td> 
 
          <input type="text" name="regname" value="" id="regname" required pattern="[A-Za-z_ ]{1,}" title="Only letters allowed."/> 
 
         </td> 
 
        </tr> 
 
        <tr> 
 
         <td> 
 
          <label>Course applied for: </label> 
 
          <label><?php echo $CourseName ?></label> 
 

 
       </table> 
 
      </form> 
 
    </div>

Answer 2

Добавить colspan="2" в TD во втором ряду, как показано ниже. Ширина первого td в первой строке автоматически расширяется, чтобы соответствовать ширине первого td во второй строке, но, установив colspan, вы можете иметь этот диапазон ячеек по ширине обеих ячеек в первой строке.

<div class="myRegInfoForm"> 
 
    <form method="POST" action="action_reg.php"> 
 
    <table> 
 
     <tr> 
 
     <td> 
 
      <label>Name:</label> 
 
     </td> 
 
     <td> 
 
      <input type="text" name="regname" value="" id="regname" required pattern="[A-Za-z_ ]{1,}" title="Only letters allowed." /> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td colspan="2"> 
 
      <label>Course applied for:</label> 
 
      <label> 
 
      <?php echo $CourseName ?> 
 
      </label> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </form> 
 
</div>

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

Answer 3

, так как у вас есть другой td, поэтому td будет авторизоваться.
так что вам нужно использовать float: прямо на этикетке;

<td><label style="float:right;">Name: </label></td> 

я надеюсь, что эта помощь

Answer 4

Я не вижу закрывающий тег для своего второго тр. Ни за последний тд.

<div class="myRegInfoForm"> 
      <form method="POST" action="action_reg.php"> 
       <table> 
        <tr> 
         <td> 
          <label>Name: </label> 
         </td> 
         <td> 
          <input type="text" name="regname" value="" id="regname" required pattern="[A-Za-z_ ]{1,}" title="Only letters allowed."/> 
         </td> 
        </tr> 
        **<tr> 
         <td>** 
          <label>Course applied for: </label> 
          <label><?php echo $CourseName ?></label> 

       </table> 
      </form> 
    </div> 

Answer 5

Вы можете положить ввод с тегами: td. Например:

<td> 
    <label style="display:inline-block;">Name: </label> 
    <input type="text" name="regname" value="" id="regname" required pattern="[A-Za-z_ ]{1,}" title="Only letters allowed."/> 
</td>