In multiple columns How to align th and td properly in HTML Table?-CodePudding

In my Angular Application, I have created a simple Bootstrap Table. Here I want to show the table aligned properly with table headers th with corresponding input fields in td. How can I get th aligned equally with respect to their input fields in the table?

Here I need Name and Email for some input fields.

Here I have shared the jsfiddle link: https://jsfiddle.net/Venkata_Shivaram/8jnasgwr/

Here is my code:

<div class="table-responsive">
         <table class="table" style="width: 100%;">               
            <thead class="card-header">
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Country</th>
                    <th>Address</th>
                    <th>Email</th>
                    <th>Phone Number</th>
                    <th>Pincode</th>                
                    <th>City</th>
                    <th>State</th>
                    <th>Region</th>
                 </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="required-field" colspan="2"><input type="text" class="form-control" formControlName="Name" placeholder="Name"></td>
                    <td class="required-field" colspan="1"><input type="text" class="form-control" formControlName="Age" placeholder="Age"></td>
                    <td class="required-field" colspan="1"><input type="text" class="form-control" formControlName="Country" placeholder="Country"></td>
                    <td class="required-field" colspan="1"><input type="text" class="form-control" formControlName="Address" placeholder="Addess"></td>
                    <td class="required-field" colspan="2"><input type="text" class="form-control" formControlName="Email" placeholder="email"></td>
                    <td class="required-field" colspan="1"><input type="text" class="form-control" formControlName="PhoneNumber" placeholder="phonenumber"></td>
                    <td class="required-field" colspan="1"><input type="text" class= "form-control" formControlName="pincode" placeholder="pincode"></td>                   
                    <td class="required-field" colspan="1"><input type="text" class="form-control" formControlName="city" placeholder="City"></td>
                    <td class="required-field" colspan="1"><input type="text" class="form-control" formControlName="state" placeholder="state"></td>
                    <td class="required-field" colspan="1"><input type="text" class="form-control" formControlName="Region" placeholder="Region"></td>
                    
                </tr>                
              </tbody>
        </table>

I have tried with applying <colgroup> HTML element for th didn't work for me.

 <colgroup>
        <col>
        <col span="2" class="batman">
        <col span="2" class="flash">
    </colgroup>

CodePudding user response：

You have used colspan="2" for Name and Email. Make it colspan="1".