Kuyo Kuyo - 7 months ago 35
CSS Question

Form table wide space between label and input text box

There is something wrong with the design of my form as shown below.

enter image description here

<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>


A wide space is between the label and input text box after adding the second
<td>
element and I'm not sure why. Can anyone help me?

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


My desired output:

enter image description here

Answer

Set text-align for the td to 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>