Question

所以，我试图让一张桌子占据整个浏览器窗口的宽度和高度。

我还希望表格单元格大小相等。

它不起作用。目前，它适合窗口的宽度，但不适合高度。我已经尝试将表高度设置为100％，但它不起作用（至少在Firefox中）。这是html：

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

<html>

<link rel="stylesheet" type="text/css" href="example.css"/>

<table>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
</tr>

</table>

</html>

这就是css：

table{
    width:100%;
    height:100%;
    border:1;
}

tr{
    height:100%;
    background-color:blue;
}

Answer 1

您需要让body和html也成为窗口的100％：在CSS上添加

html, body {
  height:100%;
}

演示 http://jsfiddle.net/ASVpD/3/

要使所有行等于删除height:100%表单tr

tr{
  /*height:100%;*/ Remove this
  background-color:blue;
}

Answer 2

试试这个：

body, html {
    height: 100%;
    min-height: 100%;
}

同时删除tr {height：100％}

演示：http://jsfiddle.net/Y73bT/2/

您也可以使用简短的doctype：而不是。

Answer 3

尝试以下方法：

CSS

html,body{
    width: 100%;
    height:100%;


}

table{
    width:100%;
    height:100%;
    top:0;
    left:0;
    right:0;
    bottom:0;
    position: absolute;
    border:1;
}

tr{
    height:auto;
    background-color:blue;
}

Answer 4

将表格位置设置为绝对值，然后设置每条边缘的位置：

table { width:100%; height:100%; position:absolute; top:0; right:0; bottom:0; left:0; }

Answer 5

表高度是相对于其父级的。将html和body设置为height：100％并从tr：

中删除高度：100％

html {
    height: 100%;
}
body {
    height: 100%;
}
table{
    width:100%;
    height:100%;
    border:1;
}
tr{
    background-color:blue;
}

表格不占据整个页面的高度

5 个答案: