Resizing a table which contains images invokes huge white regions
I have this huge issue with a table.. I am creating a page which has some images in a table. But if I resize the webpage, then the entire table goes off-screen and thus, a big white area appears.
I have tried every stupid thing. Nothing works. Overflow:hidden does NOT work. Scrollbar="no" either. Percentages not working. So anyway, here is 开发者_如何学编程the code for the table and below, the 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>
I have edited it.
Please please please tell me you are not trying to use tables to style your entire webpage. Anyway, I guess this is what you want:
<!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>
加载中,请稍侯......
精彩评论