Nested tables not inlining when width is sufficient?

Question

I'm trying to design HTML emails and therefore getting a better grip around HTML tables.

I'm currently trying to create a layout with two nested tables that should be inline. The container is 600px and the nested tables are 300px each. When reducing the width of the nested tables to 290px, the inlining works but I'd like to have it pixel perfect.

I tried to get rid of all the borders but I'm suspecting there is still a border attribute somewhere making the container smaller or the elements bigger than their specified width.

I'd love some help.

body {
  max-width: 600px;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
  background: blue;
  border: none;
}

.column {
  display: inline-block;
  width: 100%;
  max-width: 300px;
  background: red;
}

<table width="100%" class="frame">
  <tr>
    <td>
      <table class="column">
        <tr>
          <td>
            Content I
          </td>
        </tr>
      </table>
      <table class="column">
        <tr>
          <td>
            Content II
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

score 3 · Accepted Answer · answered Nov 15 '21 at 13:59

When working with inline there are automatic spaces between elements. See How do I remove the space between inline/inline-block elements?.

You can avoid them by setting the font-size to 0 on your wrapper and re-assign it on your inner elements. Also reset the padding. I added the "row" class and put those styles on it, see the snippet below.

body {
  max-width: 600px;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
  background: blue;
  border: none;
}

.row {
  font-size: 0;
  padding: 0;
}

.column {
  display: inline-block;
  width: 100%;
  max-width: 300px;
  background: red;
  font-size: 16px;
}

<body>
  <table width="100%" class="frame">
    <tr>
      <td class="row">
        <table class="column">
          <tr>
            <td>
              Content I
            </td>
          </tr>
        </table>
        <table class="column">
          <tr>
            <td>
              Content II
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>

score -1 · Answer 2 · edited Nov 16 '21 at 06:55

If it's possible I think the best approach would be using flex display on the tables' parent.

body {
  max-width: 600px;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
  background: blue;
  border: none;
}

.column-container {
  display: flex;
}

.column {
  width: 100%;
  max-width: 300px;
  background: red;
}

<table width="100%" class="frame">
  <tr>
    <td class="column-container">
      <table class="column">
        <tr>
          <td>
            Content I
          </td>
        </tr>
      </table>
      <table class="column">
        <tr>
          <td>
            Content II
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

font-size: 0 is a good hack, but it forces you to remember about resetting font-size on children. It can be easy to forget and results with "disappearing text".

Thanks for the suggestion. As stated above I'm working with emails which means flex-box and grid are not an option. — Xen_mar, Nov 15 '21 at 18:44

Nested tables not inlining when width is sufficient?

2 Answers2