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

Question

在我的 Angular 应用程序中，我创建了一个简单的引导表。在这里，我想显示表格与表格标题正确对齐，并在 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> HTML 元素，但对我不起作用。

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

Answer 1

您已将colspan="2" 用于姓名和电子邮件。设为colspan="1"。

阅读更多关于colspanhere的信息。