Kuyo Kuyo - 3 months ago 9
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>

Comments