提示:本文使用的软件环境为Micromedia Dreamweaver8和Adobe Dreamweaver2021
1. 问题描述
在网页制作过程中,为了实现表格“满屏设置”我们将table标签的weight属性和height属性设置为“100%”,也可以通过界面底部的“属性”中直接设置(见下图所示)。
然而在网页预览时,如果缩放网页可以发现,尽管实现了在宽度上的自适应,但是无法实现宽度自适应,即并没有成功实现在高度上的全屏显示。
查看源代码发现,在height属性上出现了警告提示——“height标签的TABLE属性不被支持”(见下图),也就是说设置“height=‘100%’”是无效的。相应的,在Adobe Dreamweaver2021中发现,界面底部的“属性”栏中已经取消了高度百分比的设置。
2. 问题解决
(1) 方法一
在源代码开头标注文档类型为“HTML5”即可实现
代码如下(示例):
<!DOCTYPE html5>
<body>
<table width="100%" height="100%" border="1">
</table>
</body>
(2) 方法二
将table标签放置在body标签内,并设置html标签和body标签的height属性为100%,其余内容保持不变。详细代码如下图所示
代码如下(示例):
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body{
height:100%;
margin: 0px;
}
</style>
</head>
<body>
<table width="100%" height="100%" border="1">
</table>
</body>
<html>
3. 实验结果
任意采用以上两种方法中的一种,即可真正实现表格全屏显示(演示见下图)
4. 注意
- 页眉(即表格标题)并不算在表格中,故在测试全屏显示时应下拉页面以隐去页眉
- 在测试时,页面缩放要适度,若放大比例过大(如125%)或页面缩窄过多,会因为行高已无法进一步压缩,从而导致在高度方面的全屏显示失效