在多列中如何在HTML表格中正确对齐th和td？

Question

在我的Angular应用程序中，我创建了一个简单的Bootstrap Table。在这里，我希望显示的表格与表格标题th和td中相应的输入字段正确对齐。我如何才能使其与表中的输入字段均匀对齐？

在这里，我需要一些输入字段的姓名和电子邮件。

在这里我分享了jsfiddle链接：https://jsfiddle.net/Venkata_Shivaram/8jnasgwr/

下面是我的代码：

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

我已经尝试过应用<colgroup>元素，因为这对我不起作用。

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

Answer 1

您已使用colspan="2"作为名称和电子邮件。让它成为colspan="1"。

阅读有关colspan here的更多信息。