当宽度足够时嵌套表不内联？

Question

我正在尝试设计 HTML 电子邮件，因此可以更好地掌握 HTML 表格。

我目前正在尝试创建一个包含两个应该内联的嵌套表格的布局。容器为 600px，嵌套表各为 300px。将嵌套表格的宽度减小到 290px 时，内联有效，但我希望它的像素完美。

我试图摆脱所有的边框，但我怀疑某处仍然有一个边框属性使容器变小或元素大于它们指定的宽度。

我需要一些帮助。

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>

Answer 1

使用内联时，元素之间会自动留有空格。参见 How do I remove the space between inline/inline-block elements?。

您可以通过将包装器上的 font-size 设置为 0 并将其重新分配给内部元素来避免它们。同时重置 padding。我添加了“行”class 并将这些样式放在上面，请参见下面的代码片段。

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>

Answer 2

如果可能的话，我认为最好的方法是在表格的 parent.

上使用 flex 显示

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 是一个很好的 hack，但它迫使您记住在 children 上重置 font-size。很容易忘记并导致“消失的文本”。

当宽度足够时嵌套表不内联？

Nested tables not inlining when width is sufficient?

html

css

html-email