Question

我已经在我的页面中设置了一个方框。在盒子里，我有一张桌子。在1920x1080p分辨率下，表格如下所示：

在其他决议中，它看起来像这样：

我已经尝试为表格添加最大/最小宽度，但它仍然在屏幕外。我完成了我的研究，但所有结果都没有帮助。

这是我的代码：

＆＃13;

body {
	background-repeat: no-repeat;
}

ul {
    list-style-type: none;
	width:100%;
    margin: 0;
    padding: 0;
}

li {
    float: center;
	text-align: center;
	width:10px
    border-right:1px solid #bbb;
	display: inline;
    list-style: none; 

}
li a {
    display:inline-block;
	text-align: center;
    margin-right: 0px;
    width:60px;
    font-weight:bold;
    color:#00742b;
    background-color:#f0bd00;
    text-align:center;
    padding:14px 80px;
    text-decoration:none;
    text-transform:uppercase;
}

li a:hover:not(.active) {
    background-color: #c49c00;
}


.active {
    background-color: #00742b;
	color: white;
}

#footer_menu ul {  
    padding: 10px;
    list-style: none outside none;
}

#footer_menu li.nav {
    padding: 0 4px;
}
.box {
	width:70%;
	padding: 0px 0px 420px 0px;
	background-color: grey;
	text-align: center;
	float: center;
	margin: auto;
	

}
.box2{
	text-align:left;
}

＆＃13;

<html>
	<head>
		<title>4Late - Dynamic Estates</title>
		</head>
	
	<body>
<img src="dynamic_bg_logo_1.png" style="position:absolute;z-index:-1;left:0;top:0;width:100%;"></img>
		
<br><br><br><br><br><br><br><br><br><br><br><br>
	<div style="white-space: nowrap">
		<ul id="footer_menu" style="text-align:center;font-size:100%;font-family:arial;">
			<li><font face="arial"><a href="index.html" style="padding-left: 40px;position:absolute;left:5px;top:5px;">LOCATIONS</a></li>
			<li class="nav"><font face="arial"><a href="newyork-city.html" style="padding-left: 35px;padding-right: 35px;">ALL</a></li>
			<li class="nav"><a href="homes-and-appartments.html" class="active" style="padding-left: 35px;padding-right: 170px;">HOMES & APPARTMENTS</a></li>
			<li class="nav"> <a href="offices-and-business.html" style="padding-left: 35px;padding-right: 155px;">OFFICES & BUSINESS</a></li>
			<li class="nav"><a href="industrial-and-storage.html" style="padding-left: 35px;padding-right: 175px;">INDUSTRIAL & STORAGE</a></li>
			<li class="nav"><a href="governmental.html" style="padding-left: 35px;padding-right: 105px;">GOVERNMENTAL</a></li>
		</ul>
	</div>
<img src="nav_underbar.png" style="position:absolute;z-index:0;left:0;top:11;width:100%;"></img>
<img src="white.png" style="position:absolute;z-index:-1;left:0;top:1;width:100%;height:1000px;"></img>
<br><br><br><br>

<div class="box" >
	<div class="box2" >

	<table border="1" width="100%" style="position:relative;">
		<tr>
			<td style="max-width:30%;"><p style="font-size:100%;color:#00742b;"><b>$$ PROPERTIES FOUND</b></p>	</td>
			<td colspan="4"><p style="font-size:100%;color:#00742b;text-align:right;"><b>MURRAY HILL, NEWYORK MAP</b></p>	</td>
		</tr>
		<tr>
			<td width="300px" height="200px" style="min-width:300px;max-width:300px;">
				<img src="property.png"></img>
			</td>
			<td width="50px" colspan="1" rowspan="3"></td>
			
			<td rowspan="3" colspan="3" height="600px" width="900px">
				<img src="murrayhill_default_map.jpg" height="95%" width="95%" border="2px" style="border-color:orange;"></img>
			</td>
		</tr>
		<tr>
			<td width="300px" height="200px">
				<img src="property.png"></img>
			</td>
		</tr>
		<tr>
			<td width="300px" height="200px">
				<img src="property.png"></img>
			</td>
		</tr>		
		<tr>
			<td width="300px" height="200px"><img src="property.png"></img></td>
			<td colspan="2" width="300px" height="200px"><img src="property.png"></img></td>
			<td width="300px" height="200px"><img src="property.png"></img></td>
			<td width="300px" height="200px"><img src="property.png"></img></td>
		</tr>	

	</table>
	
	</div>
</div>

	
	</body>
</html>

＆＃13;

网站的表格不适合大多数分辨率

0 个答案: