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

后端未结

关注

 8  684

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条回答

失恋的感觉

2021-01-07 06:00
Tried the following code in IE7, Mozilla 2, Chrome 1, Opera 9.5, Safari 3.2 and it works
```
<html>
<head>

</head>
 <body>
  <table height="100%" border="1">
<tr height="100px"><td>Some</td></tr>
<tr><td>Other</td></tr>
 </table>
 </body>
</html>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

终归单人心

2021-01-07 06:02

Ok in light of new information (namely the tabular data), here is a solution:

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

I'll keep the one below for completeness if you want a non-tabular solution. There's no reason it can't be extended to a 2x2 grid either by use of floats or positioning:

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

0 讨论(0)

上一页 1 2