在CSS网页里设成宽度为100%全屏，但网页里的table里宽度又怎么设置了？table宽度不会随着屏幕变化而变化？

html-css010

在CSS网页里设成宽度为100%全屏，但网页里的table里宽度又怎么设置了？table宽度不会随着屏幕变化而变化？,第1张

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：table {width: 70%}。

3、浏览器运行index.html页面，此时无论网页大小如何变化，table总能占用网页70%的宽度，可以实现随着屏幕变化而变化。

css已设置width100% 宽度没有占满浏览器是设置错误造成的，解决方法为：

1、首先需要新建一个html文件，命名为test.html。

2、接下来在test.html文件内，使用div创建一个模块，下面将对该div进行样式设置。

3、然后在test.html文件内，给div添加一个class属性，主要用于在css标签中设置它的样式。

4、在css标签中，使用width属性设置div的宽度，设置width100%即可。

让页面在不同分辨率下都全屏显示，完整代码参考如下：

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

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html charset=utf-8" /> 

<title>实现两边固定宽度,中间自适应宽度-</title> 

<style> 

body{ margin:0 padding:10px} 

#head{ margin-bottom:10px height:50px background-color:#999999} 

#main{} 

#left{ width:200px float:leftmargin-right:-200px background-color:#FF9900} 

#mid{ width:autobackground:#00FF00margin:0 220pxborder:1px solid #000} 

#right{ width:200pxmargin-left:-200px float:right background-color:#CCCC00} 

#foot{ margin-top:10px clear:both height:50px background-color:#CCCCCC} 

 

</style> 

</head> 

 

<body> 

<div id="head">我是头部</div> 

<div id="main"> 

<div id="left">我是左边,宽:200px</div> 

<div id="right">我是右边,宽:200px</div> 

<div id="mid">我是中间,宽自适应</div> 

</div> 

<div id="foot">我是底部</div> 

</body> 

</html>