Question

我有以下代码，并期望TABLE将随浏览器窗口缩小。但事实并非如此。为什么呢？

<body>
    <table style="position:fixed; left:50px; right:50px; bottom:50px; border:solid">
        <tr>
            <td style="border:solid">Left cell</td>
            <td style="border:solid">Right cell</td>
        </tr>
    </table>
</body>

的更新 的

我甚至会对CSS语言感到失望，但显然那些说不可能同时应用RIGHT和LEFT风格的人都错了！

因此，对于DIV来说，这是可能的。

此外，我发现以下代码效果更好：

<table>
    <tr style="position:fixed; left:50px; right:50px; bottom:50px; border:solid">
        <td style="border:solid; width:inherit">Left cell</td>
        <td style="border:solid; width:inherit">Right cell</td>
    </tr>
</table>

Answer 1

您可以设置left或right，但不能同时设置两者！试试这个：

<body style="padding: 50px;margin:0;">
    <table style="border-style:solid;width:100%">
        <tr>
            <td style="border-style:solid">Left cell</td>
            <td style="border-style:solid">Right cell</td>
        </tr>
    </table>
</body>

示例：http://jsfiddle.net/R8aS8/

Answer 2

我认为您想要的是将表格放在一个包含padding-left: 50px和padding-right:50px的容器中，并将表格宽度设为100％。你还应该考虑将你的css放在一个单独的文件中，因为内联css会变得混乱。

<html>
  <head>
    <style type="text/css">
      div.wrapper { padding: 0px 50px; }
      table.fullwidth { width: 100%; border: 1px solid #333; }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <table class="fullwidth">
        <tr>
          <td >Left cell</td>
          <td>Right cell</td>
        </tr>
      </table>
    </div>
  </body>
</html>

Answer 3

您绝对可以将right和left属性同时应用于元素。问题（我认为）是表格是一种特殊情况 - 如果未明确指定宽度，它们将仅展开以适应其中内容的宽度。

您需要something like this，使用定位的包装div并同时设置width的{{1}}和height来填充该内容。

为什么TABLE不服从我的正确的CSS风格？

3 个答案: