发表新帖
发表新帖

Can I create a HTML table width a percentage height but pixel accurate row heights?

后端 未结
关注
8 677
逝去的感伤
逝去的感伤 2021-01-07 05:37

I need to create a table on a web page that has two rows. The table needs to fill the entire page so I have set the height and width of the table to 100% in the CSS styleshe

相关标签:
8条回答
  • -上瘾入骨i
    2021-01-07 05:47 
    <!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>

    This is what I believe a more semantic approach without using the id of class attributes in the table tags, taking advantage of the <th> tag to make the difference between both rows. This code doesn't work as intended in IE6/7, it might work in IE8, I tested it and works correctly in Firefox 3, Safari 3.1.2, Opera 9.50 and Camino 1.6.6.

    0 讨论(0)
  • 花落未央
    2021-01-07 05:52

    Yes, you can combine all measurements. Just try it out in different browsers.

    0 讨论(0)
  • 深忆病人
    2021-01-07 05:57

    Without CSS this works:

    <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>

    So it is possible, I'll try it now with CSS.

    0 讨论(0)
  • 长发绾君心
    2021-01-07 05:57

    OK working with 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;
}
    0 讨论(0)
  • 挽巷
    2021-01-07 05:57

    Well, there's me thinking I know how to do this, so I run out the code:

    <!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>

    (note, strict + CSS)

    And I find that although this works in Firefox, Chrome and anything !IE I like, IE has some very unusual behaviour here. Long story short IE is disregarding the pixel dimensions and instead compares relative heights! It misreports this in the IE dev toolbar, but you can clearly see it if you add and change a height on tr#expand

    If you set a height of 100px, you'll find both tr's actually render at 50%. At 200px, you'll get a 33/66 split, at 50px you'll get a 66/33 split! This seems to be true for other units like em, and I suspect it might be related to content since it has edge behaviour at low units like 5px. As far as I can see IE is outright broken here. This is not a bug I have seen before, nor one I've been able to google. Until a workaround suggests itself, it seems to me that you're SOL for a strict solution.

    0 讨论(0)
  • 既然无缘
    2021-01-07 05:58

    You have given height only in one column of first row. Try to give height in both the columns or at the row level

    0 讨论(0)
 看不清?
提交回复
热议问题