我对表格有一个巨大的问题。我正在创建一个页面,该页面在表格中有一些图像。但是,如果我调整网页大小,则整个表格都会离开屏幕,因此会出现一个大的白色区域。
我尝试了所有愚蠢的事情。什么都没用。溢出:隐藏不起作用。滚动条="否"。百分比不起作用。所以无论如何,这是表格的代码,下面是CSS。
<!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>Notable Travels</title>
<style type="text/css">
.bg{
position: absolute;
top:0px;
left:0px;
width:100%;
height:100%;
z-index:0;
}
table {
border-spacing: 10px;
border-width: 5px;
border-style: solid;
border-color: #888;
}
#content {
margin: 0 auto;
z-index: 2;
color: #000;
text-align: center;
font-family: 'Times New Roman';
font-size: 24px;
font-weight: bolder;
text-decoration: blink;
}
td, th {
border-spacing: 10px;
border-width: thin;
border-style: solid;
border-color: #111;
vertical-align: middle;
}
.tableimg {
margin: 0 auto;
width: 450px;
height: 100px;
}
</style>
</head>
<body>
<table id="content">
<tr>
<th>Virtually travelling, some of the 1s ORed/ANDed with mines.</th>
</tr>
<tr>
<td><a href="http://www.soporaeternus.de"><img src="_images/Sopor.jpg" class="tableimg" /></a></td>
</tr>
<tr>
<td><a href="http://www.mensa-romania.ro"><img src"_images/Mensa.jpg" class="tableimg" /></a></td>
</tr>
<tr>
<td><a href="http://www.chess.com"><img src="_images/Chess.jpg" class="tableimg" /></a></td>
</tr>
</table>
<img src="_images/Links.jpg" border="0" class="bg"/>
</body>
</html>
我已经编辑了它。
请告诉我你没有尝试使用表格来设置整个网页的样式。无论如何,我想这就是你想要的:
<!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>Notable Travels</title>
<style type="text/css">
html {
min-width: 100%;
min-height: 100%;
background-image: url(_images/Links.jpg);
background-repeat: no-repeat;
}
table {
border-spacing: 10px;
border-width: 5px;
border-style: solid;
border-color: #888;
background-color: #FFF;
}
#content {
margin: 0 auto;
color: #000;
text-align: center;
font-family: 'Times New Roman';
font-size: 24px;
font-weight: bolder;
text-decoration: blink;
}
td, th {
border-spacing: 10px;
border-width: thin;
border-style: solid;
border-color: #111;
vertical-align: middle;
}
.tableimg {
margin: 0 auto;
width: 450px;
height: 100px;
}
</style>
</head>
<body>
<table id="content">
<tr>
<th>Virtually travelling, some of the 1s ORed/ANDed with mines.</th>
</tr>
<tr>
<td><a href="http://www.soporaeternus.de"><img src="_images/Sopor.jpg" class="tableimg" /></a></td>
</tr>
<tr>
<td><a href="http://www.mensa-romania.ro"><img src="_images/Mensa.jpg" class="tableimg" /></a></td>
</tr>
<tr>
<td><a href="http://www.chess.com"><img src="_images/Chess.jpg" class="tableimg" /></a></td>
</tr>
</table>
</body>
</html>