Question

我试图做一个嵌套表我即将完成我的第一个table 发生这种情况时：

这是我的HTML标记：

   <table class="quotationTable1">
    <%--Primary table--%>
    <tr>
        <td>
            <table>
                <%--Second Table--%>
                <tr>
                    <td style="width: 397px">
                        <table style="border-style: solid; border-color: inherit; border-width: medium; width: 452px;">
                            <%--Third Table--%>
                            <tr>
                                <th colspan="2" style="padding-top: 5px; background-color: black; color: white;">Job Quotation</th>
                            </tr>
                            <tr>
                                <td colspan="2" style="height: 26px;">
                                    <asp:Label ID="lblDescCategory" runat="server" Text="Category:"></asp:Label>
                                    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <asp:Label ID="labelDescType" runat="server" Text="Type:"></asp:Label>
                                    <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
                                </td>
                            </tr>
                            <tr>
                                <td style="width: 265px">
                                    <asp:Label ID="lblDescAddress" runat="server" Text="Address:"></asp:Label>
                                    <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
                                </td>
                                </tr>
                                <tr>
                                <td style="width: 202px">
                                    <asp:Label ID="lblDescContacts" runat="server" Text="Contacts:"></asp:Label>
                                    <asp:Label ID="Label4" runat="server" Text="Label"></asp:Label>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" style="height: 3px">
                                    <asp:Label ID="lblDescJobdesc" runat="server" Text="Job Description:"></asp:Label>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" style="height: 59px">
                                    <asp:Label ID="Label6" runat="server" Text="Label"></asp:Label>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <asp:Label ID="Label5" runat="server" Text="File: "></asp:Label>
                                    <asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <asp:Label ID="Label7" runat="server" Text="Finishing:"></asp:Label></td>
                            </tr>
                        </table>
                    </td>
                    <td>
                        <table style="width: 373px; position:relative;"><%--fourth table--%>
                            <tr>
                                   <th colspan="3" style="padding-bottom:5px; background-color: black; color: white; width: 400px;">Specification</th>
                            </tr>    
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

如何让我的第二个table 规范删除所有这些空格和与工作报价处于同一位置？

Answer 1

您需要将vertical-align:top添加到td

并且不要使用内联样式，而是使用类

td {
  vertical-align: top
}
.w400 {
  padding-bottom: 5px;
  background-color: black;
  color: white;
  width: 400px
}
.w397 {
  width: 397px
}
.w397 table {
  border-style: solid;
  border-color: inherit;
  border-width: medium;
  width: 452px
}
.w397.title {
  padding-top: 5px;
  background-color: black;
  color: white;
}
.w373.relative {
  width: 373px;
  position: relative
}
.h59 {
  height: 59px
}
.h26 {
  height: 26px
}
.h3 {
  height: 3px
}

<table class="quotationTable1">
  <tr>
    <td>
      <table>
        <tr>
          <td class="w397">
            <table class="w397 table">
              <tr>
                <th colspan="2" class="w397 title">Job Quotation</th>
              </tr>
              <tr>
                <td colspan="2" class="w397 h26">
                  <asp:Label ID="lblDescCategory" runat="server" Text="Category:"></asp:Label>
                  <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <asp:Label ID="labelDescType" runat="server" Text="Type:"></asp:Label>
                  <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
                </td>
              </tr>
              <tr>
                <td class="w265">
                  <asp:Label ID="lblDescAddress" runat="server" Text="Address:"></asp:Label>
                  <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
                </td>
              </tr>
              <tr>
                <td class="w202">
                  <asp:Label ID="lblDescContacts" runat="server" Text="Contacts:"></asp:Label>
                  <asp:Label ID="Label4" runat="server" Text="Label"></asp:Label>
                </td>
              </tr>
              <tr>
                <td colspan="2" class="h3">
                  <asp:Label ID="lblDescJobdesc" runat="server" Text="Job Description:"></asp:Label>
                </td>
              </tr>
              <tr>
                <td colspan="2" class="h59">
                  <asp:Label ID="Label6" runat="server" Text="Label"></asp:Label>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <asp:Label ID="Label5" runat="server" Text="File: "></asp:Label>
                  <asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <asp:Label ID="Label7" runat="server" Text="Finishing:"></asp:Label>
                </td>
              </tr>
            </table>
          </td>
          <td>
            <table class="w373 relative">
              <tr>
                <th colspan="3" class="w400">Specification</th>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Answer 2

您需要将表嵌套在父表中的TR和TD中：

   <table class="quotationTable1">
    <%--Primary table--%>
    <tr>
        <td>
            <table>
                <%--Second Table--%>
                <tr>
                    <td style="width: 397px">
                        <table style="border-style: solid; border-color: inherit; border-width: medium; width: 452px;">
                            <%--Third Table--%>
                            <tr>
                                <th colspan="2" style="padding-top: 5px; background-color: black; color: white;">Job Quotation</th>
                            </tr>
                            <tr>
                                <td colspan="2" style="height: 26px;">
                                    <asp:Label ID="lblDescCategory" runat="server" Text="Category:"></asp:Label>
                                    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <asp:Label ID="labelDescType" runat="server" Text="Type:"></asp:Label>
                                    <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
                                </td>
                            </tr>
                            <tr>
                                <td style="width: 265px">
                                    <asp:Label ID="lblDescAddress" runat="server" Text="Address:"></asp:Label>
                                    <asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>
                                </td>
                                </tr>
                                <tr>
                                <td style="width: 202px">
                                    <asp:Label ID="lblDescContacts" runat="server" Text="Contacts:"></asp:Label>
                                    <asp:Label ID="Label4" runat="server" Text="Label"></asp:Label>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" style="height: 3px">
                                    <asp:Label ID="lblDescJobdesc" runat="server" Text="Job Description:"></asp:Label>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                <table style="width: 373px; position:relative;"><%--fourth table--%>
                                    <tr>
                                           <th colspan="3" style="padding-bottom:5px; background-color: black; color: white; width: 400px;">Specification</th>
                                    </tr>    
                                </table>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" style="height: 59px">
                                    <asp:Label ID="Label6" runat="server" Text="Label"></asp:Label>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <asp:Label ID="Label5" runat="server" Text="File: "></asp:Label>
                                    <asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <asp:Label ID="Label7" runat="server" Text="Finishing:"></asp:Label></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

删除表格单元格上的空间以获取嵌套表格

2 个答案: