Question

我需要在一个有两行的网页上创建一个表。该表需要填充整个页面，因此我在CSS样式表中将表的高度和宽度设置为100％，并将HTML和正文的高度设置为100％。

但是，我需要将表格的顶行精确地设置为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>

编辑：我正在使用表格数据，特别是想要使用表，而不是div。上面的示例是为了简化一个包含大约20列的表格。

编辑2：我发现了这个问题。它是HTML中的doctype定义（由Visual Studio添加）。删除后......

......它完美无缺。所以我的新问题是，这样做是可行的，还是有正确的方法来处理DOCTYPE？

Answer 1

没有CSS，这有效：

<html>
  <body>
    <table height="100%" width="100%" border="1">
      <tr height="100">
        <td>This is item text.</td>
      </tr>

      <tr>
        <td>This is item text 2.</td>
      </tr>
    </table>
  </body>
</html>

所以有可能，我现在用CSS尝试。

Answer 2

正常使用CSS。

HTML：

<html>
  <head>
    <link href="table.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <table>
      <tr class="fixed">
        <td>This is item text.</td>
      </tr>

      <tr>
        <td>This is item text 2.</td>
      </tr>
    </table>

  </body>
</html>

CSS：

table
{
 border: 1px solid black;
 height: 100%;
 width: 100%;
}

tr.fixed
{
 border: 1px solid black;
 height: 100px;
}

td
{
 border: 1px solid black;
}

Answer 3

根据新信息（即表格数据），这是一个解决方案：

<html>
<head>
<style type="text/css">
    #wrap { position: absolute; height: 100%; top: 0; right: 0; bottom: 0; left: 0; }
    table { width: 100%; height: 100%; }
    tr { margin: 0; }
    td { text-align: center; font-size: 80px; font-weight: bold; color: white; }
    #top { height: 100px; }
    #bottom { height: 100%; }
    #topleft { background-color: red; border: 3px solid black; }
    #topright { background-color: green; border: 3px solid yellow; }
    #bottomleft { background-color: yellow; border: 3px solid green; }
    #bottomright { background-color: blue; border: 3px solid red; }
</style>
</head>
<body>
<div id="wrap"> 
    <table>
    <tr id="top">
        <td id="topleft">1</td>
        <td id="topright">2</td>
    </tr>
    <tr id="bottom">
        <td id="bottomleft">3</td>
        <td id="bottomright">4</td>
    </tr>
  </table>
</div>  
</body>
</html>

如果你想要一个非表格式的解决方案，我会保留下面的完整性。没有理由不能通过使用浮点数或定位来扩展到2x2网格：

<html>
<head>
  <style type="text/css" media="screen">
    #wrap {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
    }

    #top {
      width: 100%;
      height: 100px;
      position: relative;
      top: 0;
      background-color: #CCC;
    }

    #bottom {
      position: relative;
      height: 100%;
      bottom: 0;
      width: 100%;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div id="wrap">
    <div id="top">Top</div>
    <div id="bottom">Bottom</div>
  </div>
  </body>
</html>

Answer 4

嗯，我想我知道怎么做，所以我用完了代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <style type="text/css">
    html, body 
    {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    table 
    {
        height: 100%;
        width: 100%;
        background-color: blue;
        border-collapse:collapse;
    }
    tr#fixed
    {
        background: silver; 
        height: 100px;
    }
    tr#expand
    {
        background: gray;
    }
    td 
    {
        text-align: center;
    }
    </style>
</head>
<body>
    <table>
        <tbody>
            <tr id="fixed">
                <td>100</td>
            </tr>
            <tr id="expand">
                <td>*</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

（注意，严格+ CSS）

我发现虽然这适用于Firefox，Chrome和其他任何东西！IE我喜欢，IE在这里有一些非常异常行为。长话短IE不考虑像素尺寸，而是比较相对高度！它在IE开发工具栏中误报了这一点，但如果您在tr#expand上添加和更改高度，则可以清楚地看到它

如果你设置100px的高度，你会发现两个tr实际渲染为50％。在200px时，你将获得33/66的分割，在50px时你将得到66/33的分割！这对于像em这样的其他单位似乎也是如此，我怀疑它可能与内容有关，因为它在像5px这样的低单位时具有边缘行为。据我所知，IE在这里彻底打破了。这不是我以前见过的错误，也不是我能够谷歌的错误。在解决方法表明自己之前，在我看来，你是SOL的严格解决方案。

Answer 5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style type="text/css" media="screen">
        html, body {
            height:100%;
            margin:0;
        }
        table {
            background-color:#ccc;
            width:100%;
            height:100%;
        }
        th {
            height:100px;
            background-color:#fcfcfc;
        }
    </style>

    <title>TableTest</title>

</head>

<body>

<table>
    <tr>
        <th>Header1</th>
        <th>Header2</th>
    </tr>
    <tr>
        <td>Data1</td>
        <td>Data2</td>
    </tr>
</table>

</body>
</html>

我认为这是一种更加语义的方法，不使用表标签中的类属性的id，利用了＆lt; th＆gt;。标记以使两行之间产生差异。此代码在IE6 / 7中无法正常工作，它可能在IE8中运行，我测试它并在Firefox 3，Safari 3.1.2，Opera 9.50和Camino 1.6.6中正常工作。

Answer 6

您仅在第一行的一列中指定了高度。尝试在列中或行级别给出高度

Answer 7

是的，您可以组合所有测量。只需在不同的浏览器中试用即可。

Answer 8

尝试在IE7，Mozilla 2，Chrome 1，Opera 9.5，Safari 3.2中运行以下代码

<html>
<head>

</head>
 <body>
  <table height="100%" border="1">
<tr height="100px"><td>Some</td></tr>
<tr><td>Other</td></tr>
 </table>
 </body>
</html>

我可以创建一个HTML表宽度百分比高度但像素精确行高吗？

8 个答案: