Question

在这里，强大的互联网！我正在编写电子邮件（呃！），显然这意味着比我十年来写的表更多。除了忽略某些已弃用的属性之外，浏览器似乎还会使表的结构变得扁平化。

所以，我们说these tables here。第一个按预期输出，为2列布局。第二个不是。添加tr和td元素以包含单元格的内部实际上会破坏布局。

要查看它，请检查结果输出。您会注意到第二个表格变成了一堆tr个标签。控制宽度的td：

<td width="264" valign="top"></td>

呈现为空元素，而不是包含其子tr和td标记。

我的问题：有没有人知道为什么会这样？

编辑：作为参考，W3C验证器会抱怨迷路终端标签，但他们正在关闭正确的东西。此HTML是从Pug模板自动生成的，我认为它无效。

Answer 1

简单的错误 - 准备一个facepalm。

您忘记启动嵌套表，也就是说您忘记在新TR标记之前在内部表格中放入表格标记。

当您使用嵌套表时，结构需要是TABLE - TR - TD - TABLE - TR - TD - CONTENT。

你之前有过：TABLE - TR - TD - TR - TD - CONTENT - 这导致你的代码试图纠正自己并将TR移动到一个有效的格式，从而产生你经历过的奇怪。

请参阅下面的更正HTML：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <table width="600" cellpadding="0" cellspacing="24" border="0">
    <tr>
      <td width="264" valign="top">
        <h3>Alles auf einen Blick</h3>
        <p>Zu den Themen EU-Regulierung, Kostenkontrolle, Datenroaming oder Ländergruppen finden Sie wichtige Hinweise auf unseren Info-Seiten.</p>
        <button>Jetzt informieren</button>
      </td>
      <td width="264" valign="top">
        <h3>Schnell zur Lösung</h3>
        <p>Finden Sie jederzeit und unkompliziert den direkten Weg zur Lösung Ihres Anliegens. Unser Hilfe & Service Bereich ist die richtige Anlaufstelle.</p>
        <button>Jetzt entdecken</button>
      </td>
    </tr>
  </table>

  <hr>

  <table width="600" cellpadding="0" cellspacing="24" border="0">
    <tr>
      <td width="264" valign="top">
        <table width="100%">
          <tr>
          <td>
            <h3>Alles auf einen Blick</h3>
          </td>
        </tr>
        <tr>
          <td>
            <p>Zu den Themen EU-Regulierung, Kostenkontrolle, Datenroaming oder Ländergruppen finden Sie wichtige Hinweise auf unseren Info-Seiten.</p>
          </td>
        </tr>
        <tr>
          <td>
            <button>Jetzt informieren</button>
          </td>
        </tr>
          </table>
      </td>
      <td width="264" valign="top">
        <table width="100%">
          <tr>
          <td>
            <h3>Schnell zur Lösung</h3>
          </td>
        </tr>
        <tr>
          <td>
            <p>Finden Sie jederzeit und unkompliziert den direkten Weg zur Lösung Ihres Anliegens. Unser Hilfe & Service Bereich ist die richtige Anlaufstelle.</p>
          </td>
        </tr>
        <tr>
          <td>
            <button>Jetzt entdecken</button>
          </td>
        </tr>
          </table>
      </td>
    </tr>
  </table>
</body>
</html>

HTML表格结构变得扁平化

1 个答案: