Question

I’m new to HTML but struggling with something that seems to me to be quite basic. I need to create some HTML to use as the basis for an e-mail template. As such due to the myriad considerations for e-mail clients with HTML rendering I’m using tables rather than grids etc. I am trying to ensure that nested tables in TD elements obey parent margins and padding but also occupy 100% of the available space in the TD. I’m attempting to use the width css attribute for this.

I have the following code as an exmaple to illustrate my issue:

<html>

<head>
  <style>
    table {
      background-color: white;
    }
    
    td {
      background-color: rgb(179, 228, 247);
      border: 2px solid greenblack;
    }
    
    .emph {
      font-weight: bold;
      font-style: italic;
    }
    
    .outer {
      background-color: rgb(210, 204, 208);
      border: 2px solid black;
      padding: 5px;
    }
    
    .inner {
      border: 1px solid red;
      background-color: white;
    }
    
    .inner1 {
      width: 100%;
    }
    
    .inner2 {
      width: 100%;
      margin: 10px;
    }
    
    .inner3 {
      margin: 10px;
      width: auto;
    }
  </style>
</head>

<body>
  <table class="outer">
    <caption>Table 1</caption>
    <tbody>
      <tr>
        <td class="outer">
          <table class="inner inner1">
            <caption>Nested Table 1</caption>
            <tbody>
              <tr>
                <td>
                  If immediate parent table has <span class="emph">no</span> margin and width=100% then this TD <span class="emph">should not overlap </span> the containing TD element edge
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <tr>
        <td class="outer">
          <table class="inner inner2">
            <caption>Nested Table 2</caption>
            <tbody>
              <tr>
                <td>
                  If immediate parent table <span class="emph">has</span> a margin and width=100% then this TD might overlap the containing TD element edge as the 100% is the size of the parent table of this table without margins
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
      <tr>
        <td class="outer">
          <table class="inner inner3">
            <caption>Nested Table 3</caption>
            <tbody>
              <tr>
                <td>
                  If immediate parent table has width=auto then margins and padding <span class="emph">should be accounted for and no overlap
                                </span>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>

</body>

</html>

So Nested Table 1 and Nested Table 2 are as expected based on use of width:100% but Nested Table 3 I want to fill the TD space (you can see it’s shrunk to the text size it seems.

How to achive this?

CSS width:auto behaviour with nested tables

LEAVE A COMMENT Hủy