rai nalasa rai nalasa - 6 months ago 10
CSS Question

Remove space on a table cell for a nested Table

I'm trying to do a nested-table I'm about to be finish on my first table
when this happen:

enter image description here

here Is my markup:

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


How can I make my second table Specification remove all those spaces and
be on the same position as Job Quotation?

Answer

you need to add vertical-align:top to td

and don't use inline styles, use classes instead

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>

Comments