Question

我有一个简单的表结构

<html>

<head>
  <style>
    table {
      border-spacing: 0;
      white-space: normal;
    }

    table td {
      border: 1px solid black;
    }
  </style>
</head>

<body>
  <table>
    <tbody>
      <tr>
        <td>
          <p>tempor invidunt ut labore et dolore magna aliquyam erat</p>
          <p>Lorem ipsum dolor </p>
        </td>
        <td>
          <p>tempor invidunt ut labore et dolore magna aliquyam erat</p>
          <p>Lorem ipsum dolor </p>
        </td>
        <td>
          <p>tempor invidunt ut labore et dolore magna aliquyam erat</p>
          <p>Lorem ipsum dolor </p>
        </td>
      </tr>
      <tr>
        <td>
          <p>tempor invidunt ut labore et dolore magna aliquyam erat</p>
          <p>Lorem ipsum dolor </p>
        </td>
        <td>
          <p>tempor invidunt ut labore et dolore magna aliquyam erat</p>
          <p>Lorem ipsum dolor </p>
        </td>
        <td>
          <p>tempor invidunt ut labore et dolore magna aliquyam erat</p>
          <p>Lorem ipsum dolor </p>
        </td>
      </tr>
      <tr>
        <td>
          <p>tempor invidunt ut labore et dolore magna aliquyam erat</p>
          <p>Lorem ipsum dolor </p>
        </td>
        <td>
          <p>tempor invidunt ut labore et dolore magna aliquyam erat</p>
          <p>Lorem ipsum dolor </p>
        </td>
        <td>
          <p>tempor invidunt ut labore et dolore magna aliquyam erat</p>
          <p>Lorem ipsum dolor </p>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

里面的段落得到了默认的边距。但在某些情况下，这个边距不会与表格单元格的边界相互作用，在某些情况下也会与表格单元格相互作用。

我认为这是因为iframe的奇怪行为。所以我在本地用2个测试文件开始测试。它看起来像这样： https://teamplexus.de/table-test/

正如您所看到的那样，iframe内外段落的边距不会使单元格空白。

但是如果我在codepen或jsfiddle中重新创建它，它看起来不同： https://codepen.io/Killerbear_02/pen/pVYmrN

这里的边距会影响表格单元格内的空间。

我不会理解这种不同的行为。如何强制我的表格在各处保持一致？

Answer 1

在body标签样式=＆＃34; margin：0px！important; padding：0px！important;＆＃34;

尝试一次。

表中段落的边距有时会被忽略，有时则不会被忽略。为什么？

1 个答案: