Why tr in table adds additional height-CodePudding

I'm trying to figure out why the 2 rows are so far apart, since there is no additional height on the inner tables. Inspecting the height in Chrome shows that the topmost TD has 50px, while the table underneath is 24px.

Why is this the case?

<table width="540px" height="94px" style="background-color: #fafbfc;">
  <tbody>
    <tr>
      <td style="padding:0 0 0 55px;vertical-align:middle;">
        <table style="border-collapse:separate;">
          <tbody>
            <tr>
              <td>
                <span style="display:block;padding:0px 15px;">First field</span>
              </td>
              <td>
                <span style="text-decoration:none;display:block;padding:0px 15px;">Second field</span>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td style="padding:0 55px 0 55px; vertical-align:middle;">
        another
      </td>
    </tr>
  </tbody>
</table>

CodePudding user response：

This is due to cellpadding and cellspacing. According to this geeksforgeeks article

Cellpadding specifies the space between the border of a table cell and its contents (i.e) it defines the whitespace between the cell edge and the content of the cell.

Cellspacing specifies the space between cells (i.e) it defines the whitespace between the edges of the adjacent cells.

If you want both td to have same height, then provide cellpadding="0" cellspacing="0" attributes to both outer and inner table tags.

CodePudding user response：

The answer is ultimately the width and height attributes you have added.
If you wish to have these, they should go within the style attribute

I have taken out most of the styling just for ease of the snippet.

I would also recommend making use of the thead and <th> elements. As they relate sole to headings in tables. https://www.w3schools.com/tags/tag_th.asp

<table style="background-color: #fafbfc;">
  <thead>
    <tr>
      <th>
        <span style="display:block;padding:0px 15px;">First field</span>
      </th>
      <th>
        <span style="text-decoration:none;display:block;padding:0px 15px;">Second field</span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="padding:0 55px 0 55px; vertical-align:middle;">
        1st column data
      </td>
      <td style="padding:0 55px 0 55px; vertical-align:middle;">
        More data
      </td>
    </tr>
  </tbody>
</table>

CodePudding user response：

Nesting a table inside another table is not a good idea, that is why you have an unexpected result. When there's table nested inside another table, you may start to get unwanted styles. This is because parent table styles will also affect the child table. For example, if you add height on the parent table, it will affect the child table too.

<table>
    ...
    <table>
      ....
    </table>
</table>