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

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，利用<th>标记来区分两行。 此代码在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>