Question

这是Can I create a HTML table width a percentage height but pixel accurate row heights?的后续问题。

我在HTML页面中有一个表格，用于表格数据（所以我不想要基于div的答案）。这需要以100％的高度渲染，顶行具有固定的大小，第二行伸展以适应可用区域的其余部分。

我使用了以下代码：

<html>
  <body>
    <table style="border-collapse:collapse;height:100%;width:100%;">
      <tr>
        <td style="border:solid 1px black;height:100px">1</td>
        <td style="border:solid 1px black">2</td>
      </tr>
      <tr>
        <td style="border:solid 1px black">3</td>
        <td style="border:solid 1px black">4</td>
      </tr>
    </table>
  </body>
</html>

这就像我要求的那样。

问题是，当我将它放在Visual Studio中创建的ASP.NET页面中时，它会添加一个DOCTYPE元素。添加DOCTYPE（并将html和body标签的CSS设置为包含高度：100％）后，表格的顶行比底行大得多，且两行都没有固定的高度。

我知道我应该使用DOCTYPE而不是依赖Internet Explorer中的“怪癖模式”来确保将来的兼容性。但是，我已经尝试了所有可以找到的DOCTYPE尝试将此行为更改为我需要但无法使其工作。它在Firefox中有效，但是用户使用IE7的内联网工作。

如果您想查看问题，请尝试以下操作：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="height:100%">
  <body style="height:100%">
    <table style="border-collapse:collapse;height:100%;width:100%;">
      <tr>
        <td style="border:solid 1px black;height:100px">1</td>
        <td style="border:solid 1px black">2</td>
      </tr>
      <tr>
        <td style="border:solid 1px black">3</td>
        <td style="border:solid 1px black">4</td>
      </tr>
    </table>
  </body>
</html>

有谁知道答案？

Answer 1

有一种简单的方法可以解决这个问题，特别是如果页面只包含此表，并且您只是希望它能够正常工作。我不确定ASP.NET是否会让你这么做：在doctype前添加注释。 E.g。

<!-- Here for IE6/7 -->
<!DOCTYPE html (etc.)>
... The HTML that works in quirks mode ...

这将使IE6和IE7触发 quirks 模式，这意味着那些早期的答案实际上会起作用。但它完全有效地使用了DOCTYPE，并将在所有其他浏览器中触发标准模式。 IE8（无论如何RC1）也使用了quirks模式，虽然它也可以在标准模式下正确渲染。

当然，保持IE6和7处于怪癖模式意味着它们也将处于所有其他东西的怪癖模式，所以如果你要使用很多其他CSS，你可能会后悔。

Answer 2

我尝试尽可能少地使用％，因为填充，边框和边距被添加到100％宽度（如果有的话），除非你使用石器时代的浏览器..我用来只是平铺背景图像来伪造任何东西我希望父元素或正文具有100％的高度。

Answer 3

首先我建议在行级别设置高度，而不是单元格级别。其次，如果您将第二行的高度设置为100％IE将使其填充表中的其余可用空间。以下应该有效：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="height:100%">
  <body style="height:100%">
    <table style="border-collapse:collapse;height:100%;width:100%; table-layout:fixed;">
      <tr style="height: 100px;">
        <td style="border:solid 1px black">1</td>
        <td style="border:solid 1px black">2</td>
      </tr>
      <tr style="height: 100%">
        <td style="border:solid 1px black">3</td>
        <td style="border:solid 1px black">4</td>
      </tr>
    </table>
  </body>
</html>

使用基于百分比的高度可能不是您的最佳选择，但不知道并理解您要实现的目标，这是我能给您的最佳建议

Answer 4

我solution发布了你的问题，其中有一个（必要的）div缠绕在你的桌子上，与那个DOCTYPE和我试过的其他几个完美配合，所以我不确定问题是什么

你是否只是选择忽略它，因为它有一个div？或者你没有看过它或尝试过吗？ div有什么问题？

如何使用CSS指定的DOCTYPE在100％高度表中修复表格行高？

4 个答案: