表格及其内容正在移到一边 - 为什么？

Question

我有几个表格，它们的内容在 JSFiddle, but on another website opened in the same browser everything - table, content - shifts to the right (screenshot 中看起来不错）。如何强制内容看起来像上面 JSFiddle 示例中的那样？一切都应该移回左侧（见屏幕截图上的箭头）。
谢谢！

原代码如下：

<table style="height: 28px; width: 99.0328%; border-collapse: collapse; border-style: hidden;" border="0">
  <tbody>
    <tr style="height: 18px;">
      <td style="width: 13.0819%; height: 18px;"><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 14.0px; font-style: normal; line-height: 16px; font-weight: 400; display: inline;">Some text</span></td>
      <td style="width: 63.7345%; height: 18px;">&nbsp;</td>
    </tr>
    <tr>
      <td style="width: 13.0819%;"><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 14.0px; font-style: normal; line-height: 16px; font-weight: 400; display: inline;">&nbsp;</span></td>
      <td style="width: 63.7345%;">&nbsp;</td>
    </tr>
    <tr style="height: 18px;">
      <td style="width: 13.0819%; height: 10px;"><img style="display: block; margin: 0px auto 30px auto;" src="https://content.linkedin.com/content/dam/me/business/en-us/amp/brand-site/v2/bg/LI-Bug.svg.original.svg" alt="" width="120" height="120" /></td>
      <td style="width: 63.7345%; height: 10px;">
        <table style="height: 46px; width: 32.4247%; border-collapse: collapse; border-style: hidden;" border="0">
          <tbody>
            <tr style="height: 18px;">
              <td style="width: 100%; height: 10px;"><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 18.0px; font-style: normal; line-height: 24px; font-weight: bold; color: #454545; display: inline;">TITLE</span></td>
            </tr>
            <tr style="height: 18px;">
              <td style="width: 100%; height: 18px;"><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 13.0px; font-style: normal; line-height: 17px; font-weight: 600; color: #f25e30; display: inline;">Description</span></td>
            </tr>
          </tbody>
        </table>
        <table style="height: 74px; width: 38.1632%; border-collapse: collapse; border-style: hidden;" border="0">
          <tbody>
            <tr style="height: 18px;">
              <td style="width: 10.1%; height: 18px;"><img src="https://y5t6h9a6.stackpathcdn.com/39f70a22-cae2-45dd-b2a1-ae008217d0c3/img.png" alt="" width="16" height="16" /></td>
              <td style="width: 690.907%; height: 18px;"><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 14.0px; font-style: normal; line-height: 16px; font-weight: 400; color: #454545; display: inline;">phone number</span></td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

如果我理解正确的话，你想在任何情况下将内容向左移动。但首先你应该知道这种行为的原因。原因是CSS相对单位。在 CSS 中，您可以通过两种方式定义宽度、高度或任何其他属性的单位：

相对单位如 % 或 vw 或 ...
使用绝对单位，如 px。

第二个是 suitable，当您希望某个元素（这里是 table 标签）具有固定值（例如固定的 width）时，无论浏览器（此处为浏览器宽度）。当您将代码放入 jsfiddle 时，它会在浏览器的 bottom-right 部分显示结果。所以显示内容的宽度是有限的，因为你定义了相对于父元素宽度（width: 99.0328%）的宽度（这里是 body 标签），你会看到元素是密集的并且 space 他们之间是低的。如果您在 PC 浏览器（宽度更大）中看到该代码，您会得到 不同的 结果（如您发布的图片）。因此，一种解决方案是将所有 table 放在 <section> 标签中，并为该 <section> 标签指定一个绝对宽度，如下面的代码所示：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<section style="width: 606px">
<table style="height: 28px; width: 99.0328%; border-collapse: collapse; border-style: hidden;" border="0">
    <tbody>
    <tr style="height: 18px;">
        <td style="width: 13.0819%; height: 18px;"><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 14.0px; font-style: normal; line-height: 16px; font-weight: 400; display: inline;">Some text</span></td>
        <td style="width: 63.7345%; height: 18px;">&nbsp;</td>
    </tr>
    <tr>
        <td style="width: 13.0819%;"><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 14.0px; font-style: normal; line-height: 16px; font-weight: 400; display: inline;">&nbsp;</span></td>
        <td style="width: 63.7345%;">&nbsp;</td>
    </tr>
    <tr style="height: 18px;">
        <td style="width: 13.0819%; height: 10px;"><img style="display: block; margin: 0px auto 30px auto;" src="https://content.linkedin.com/content/dam/me/business/en-us/amp/brand-site/v2/bg/LI-Bug.svg.original.svg" alt="" width="120" height="120" /></td>
        <td style="width: 63.7345%; height: 10px;">
            <table style="height: 46px; width: 32.4247%; border-collapse: collapse; border-style: hidden;" border="0">
                <tbody>
                <tr style="height: 18px;">
                    <td style="width: 100%; height: 10px;"><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 18.0px; font-style: normal; line-height: 24px; font-weight: bold; color: #454545; display: inline;">TITLE</span></td>
                </tr>
                <tr style="height: 18px;">
                    <td style="width: 100%; height: 18px;"><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 13.0px; font-style: normal; line-height: 17px; font-weight: 600; color: #f25e30; display: inline;">Description</span></td>
                </tr>
                </tbody>
            </table>
            <table style="height: 74px; width: 38.1632%; border-collapse: collapse; border-style: hidden;" border="0">
                <tbody>
                <tr style="height: 18px;">
                    <td style="width: 10.1%; height: 18px;"><img src="https://y5t6h9a6.stackpathcdn.com/39f70a22-cae2-45dd-b2a1-ae008217d0c3/img.png" alt="" width="16" height="16" /></td>
                    <td style="width: 690.907%; height: 18px;"><span style="font-family: Tahoma, Geneva, sans-serif; font-size: 14.0px; font-style: normal; line-height: 16px; font-weight: 400; color: #454545; display: inline;">phone number</span></td>
                </tr>
                </tbody>
            </table>
        </td>
    </tr>
    </tbody>
</table>
</section>

</body>
</html>

如果您想了解有关 CSS units 的更多信息，我建议您阅读更多教程，例如 this one。

表格及其内容正在移到一边 - 为什么？

Tables and their content are shifting aside - why?

html

css

html-table