defined <td> in differnt rows, width not working

Question

Back to 1998! I am working on a newsletter template witht tables! My issue is that my td is not taking the width defined but is inherting it!

The bottom two rows in the sample have three columns each! In the top row I need the side columns as defined to be 42px, and the bottom row to be 83px. I cannot figure out what I am doing wrong! Thank you!

<tr>
  <td>
    <table bgcolor="#c1d781" width="503px" align="center" border="1">
      <tr>
        <td colspan="3">
          <p mc:edit="element-title">„Lorem Lorem Lorem“</p>
        </td>
      </tr>
      <tr>
        <td height="10px" colspan="3"></td>
      </tr>
      <tr>
        <td width="42px">&nbsp;</td>
        <td align="center" width="420px">
          <p mc:edit="element-teaser">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sapien.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.
          </p>
        </td>
        <td width="42px">&nbsp;</td>
      </tr>
      <tr>
        <td height="50px" colspan="3"></td>
      </tr>
      <tr>
        <td width="83px">&nbsp;&nbsp;&nbsp;</td>
        <td align="center" width="337px">
          <p mc:edit="element-button"><a href="#">BUTTON</a>
          </p>
        </td>
        <td width="83px">&nbsp;&nbsp;&nbsp;</td>
      </tr>
      <tr>
        <td height="60px" colspan="3"></td>
      </tr>
    </table>
  </td>
</tr>

Answer 1

What you are trying to do isn't supported in a single table (and rightly so). A table is like a grid - you can't have different column widths per row. You can however solve this by nesting tables.

In this example each row holds a single cell in which you place a nested table of 1 row with 3 cells:

<tr>
  <td>
    <table bgcolor="#c1d781" width="503px" align="center" border="1">
      <tr>
        <td>
          <p mc:edit="element-title">„Lorem Lorem Lorem“</p>
        </td>
      </tr>
      <tr>
        <td height="10px"></td>
      </tr>
      <tr>
        <td>
          <table border="1">
            <tr>
              <td width="42px">&nbsp;</td>
              <td align="center" width="420px">
                <p mc:edit="element-teaser">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sapien.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.
                </p>
              </td>
              <td width="42px">&nbsp;</td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td height="50px"></td>
      </tr>
      <tr>
        <td>
          <table border="1">
            <tr>
              <td width="83px">&nbsp;&nbsp;&nbsp;</td>
              <td align="center" width="337px">
                <p mc:edit="element-button"><a href="#">BUTTON</a>
                </p>
              </td>
              <td width="83px">&nbsp;&nbsp;&nbsp;</td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td height="60px"></td>
      </tr>
    </table>
  </td>
</tr>