我想在html中的行（包含两列）之间的行（三列）中创建多个列。这该怎么做？

Question

请指导。图片已附上。

我想为所有行和列进行正确对齐。我用这段代码制作了这张表。如何在“扣减模式”行中对齐并添加第四列，以使表格行与列对齐。谢谢。

<table width="100%" class="generalTable">
                    <tr>
<th colspan="3" class="clspopupheading">   Approval

                        </th>

                    </tr>
                    <tr>
                        <td colspan="3">
                            &nbsp;

                        </td>

                    </tr>
                    <tr>
                        <td style="width: 110px;">
                            <span class="mendatory">*</span>Employee ID:
                        </td>
                        <td colspan="2">
                            <input type="text" id='txtEmployeeID' runat="server" class="clsTxtDepartmentName" readonly="readonly"/>
                            <asp:RequiredFieldValidator ID="rfvDepartmentName" runat="server" ValidationGroup="Department"
                                ErrorMessage="*" Display="Dynamic" ControlToValidate="txtEmployeeID" CssClass="rfvDepartmentName">
                                </asp:RequiredFieldValidator>
                            <input type="hidden" id="hfDepartmentId" runat="server" class="hfDepartmentId" />
                        </td>
                    </tr>
                    <tr>
                        <td >
                            Approved Amount:
                        </td>
                        <td>
                            <input type="text" id='txtApprovedAmount' runat="server" class="clsTxtDepartmentName"/>
                        </td>
                    </tr>
                    <tr>
                        <td >
                            Deduction Mode: 
                        </td>
                        <td >
                        <asp:RadioButton ID="fixedamount" GroupName="DeductionMethod" Text="Fixed Amount" Checked="true" runat="server" />
                        </td>
                        <td>
                        <asp:RadioButton ID="percentage" GroupName="DeductionMethod" Text="Percentage" runat="server" />
                        </td>
                    </tr>
                    <tr>
                        <td >
                        Deduction Amount/ Percentage:
                        </td>
                        <td colspan="3">
                            <input type="text" id='txtDeductionAmount' runat="server" class="clsTxtDepartmentName"/>
                        </td>
                    </tr>
                    <tr>
                        <td >
                            Deduction Mode: 
                        </td>
                        <td>
                        <asp:RadioButton ID="rbtnApproval" GroupName="Approval"  Text="Approve" Checked="true" runat="server" />
                        </td>
                        <td>
                        <asp:RadioButton ID="rbtnPending" GroupName="Approval" Text="Pending" runat="server" />
                        </td>
                        <td>
                        <asp:RadioButton ID="rbtnReject" GroupName="Approval" Text="Reject" runat="server" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            &nbsp;

                        </td>

                    </tr>
                    <tr>
                        <td align="right" colspan="2">

                            <asp:Button ID="btnSave" Text="Save" runat="server" CssClass="button1 clsBtnSave"
                                ValidationGroup="Department" OnClick="btnSave_Click" />
                            <asp:Button ID="btnCancel" Text="Cancel" runat="server" 
                                CssClass="button1 clsCancelButton" onclick="btnCancel_Click" 
                                 />

                        </td>
                    </tr>
                </table>

Answer 1

您希望将多个选项合并到一个表中。而且，colspans也不是很正确。这样的事情。

<table width="100%" class="generalTable" border="2">
                <tr>

批准

                    </th>

                </tr>
                <tr>
                    <td colspan="4">
                        &nbsp;

                    </td>

                </tr>
                <tr>
                    <td style="width: 110px;">
                        <span class="mendatory">*</span>Employee ID:
                    </td>
                    <td colspan="3">
                        <input type="text" id='txtEmployeeID' runat="server" class="clsTxtDepartmentName" readonly="readonly"/>
                        <asp:RequiredFieldValidator ID="rfvDepartmentName" runat="server" ValidationGroup="Department"
                            ErrorMessage="*" Display="Dynamic" ControlToValidate="txtEmployeeID" CssClass="rfvDepartmentName">
                            </asp:RequiredFieldValidator>
                        <input type="hidden" id="hfDepartmentId" runat="server" class="hfDepartmentId" />
                    </td>
                </tr>

                <tr>
                    <td >
                        Approved Amount:
                    </td>
                    <td colspan = 3>
                        <input type="text" id='txtApprovedAmount' runat="server" class="clsTxtDepartmentName"/>
                    </td>
                </tr>

                <tr>
                    <td >
                        Deduction Mode: 
                    </td>
                    <td colspan = 3>
            <table border="1">
                <tr>
                    <td>
                                    <asp:RadioButton ID="fixedamount" GroupName="DeductionMethod" Text="Fixed Amount" Checked="true" runat="server" />
                    </td>   
                    <td>
                                    <asp:RadioButton ID="percentage" GroupName="DeductionMethod" Text="Percentage" runat="server" />
                    </td>
                </tr>
            </table>
                    </td>

                </tr>

                <tr>
                    <td >
                    Deduction Amount/ Percentage:
                    </td>
                    <td colspan="3">
                        <input type="text" id='txtDeductionAmount' runat="server" class="clsTxtDepartmentName"/>
                    </td>
                </tr>

                <tr>
                    <td >
                        Deduction Mode: 
                    </td>
        <td colspan = 3>
            <table border="1">
                <tr>
                    <td>
                                    <asp:RadioButton ID="rbtnApproval" GroupName="Approval"  Text="Approve" Checked="true" runat="server" />
                    </td>   
                    <td>
                                    <asp:RadioButton ID="rbtnPending" GroupName="Approval" Text="Pending" runat="server" />
                    </td>
                    <td>
                                    <asp:RadioButton ID="rbtnReject" GroupName="Approval" Text="Reject" runat="server" />
                    </td>
                </tr>
            </table>
                    </td>
        </tr>
                <tr>
                    <td colspan="4">
                        &nbsp;

                    </td>

                </tr>

                <tr>
                    <td align="right" colspan="2">

                        <asp:Button ID="btnSave" Text="Save" runat="server" CssClass="button1 clsBtnSave"
                            ValidationGroup="Department" OnClick="btnSave_Click" />
                        <asp:Button ID="btnCancel" Text="Cancel" runat="server" 
                            CssClass="button1 clsCancelButton" onclick="btnCancel_Click" 
                             />

                    </td>
                </tr>

            </table>