CSS padding-top 无效，没想到会栽倒在CSS上，真心求教！

0 0

CSS padding-top 无效，没想到会栽倒在CSS上，真心求教！10

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<style type="text/css">
		.mina_table{
			border-top: 1px solid #C1DAD7;
			border-left: 1px solid #C1DAD7;
			
		}
		td {
			border-right: 1px solid #C1DAD7;
			border-bottom: 1px solid #C1DAD7;
			background: #fff;
			font-size:12px;
			padding: 6px 6px 6px 12px;
			color: #4f6b72;
		}
	</style>
</head>
	<body >
		<table class="main_table" style="height:300px; width:50%; background-color:pink;">
			<tr height="100%">
			  <td style=" background-color:#FFFF99; padding-left:100px; padding-top:10px;height:300px;" >
					<table style=" background-color:gray; border:2px; height:300px;">
						<tr  >
						  <td height="10px;">1111111111</td>
						</tr>
						<tr >
						  <td  height="10px;">11111111111</td>
						</tr>
						<tr >
						  <td height="10px;">1111111111</td>
						</tr>
				  </table>
			 </td>
			</tr>
		</table>
	</body>
</html>

问题补充：今天栽倒在一个CSS上面，html如上所示，效果如附件图所示。
期望效果：椭圆形内的table移动到方框的位置。
我是在一个td内嵌套的table,td的padding-left设置有效，但是padding-top无效。
我本人对CSS不是很了解，遇到这个问题，我很想搞清楚为什么？难道table只能用来撑大吗？

HTML CSS

2013年8月28日 23:59

blusewang
2
0 0 6

查看图片附件

2个答案按时间排序按投票排序

0 0

td默认是垂直居中的, 你要在table所在的td中设置垂直上对齐, 另外你td内的height和td的高度都是300px,怎么可能实现你的效果.修改后的代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<style type="text/css">
		.mina_table{
			border-top: 1px solid #C1DAD7;
			border-left: 1px solid #C1DAD7;
			
		}
		td {
			border-right: 1px solid #C1DAD7;
			border-bottom: 1px solid #C1DAD7;
			background: #fff;
			font-size:12px;
			padding: 6px 6px 6px 12px;
			color: #4f6b72;
		}
	</style>
</head>
	<body >
		<table class="main_table" style="height:300px; width:50%; background-color:pink;">
			<tr height="100%">
			  <td  style="background-color:#FFFF99; padding-left:100px; padding-top:10px;height:300px; vertical-align: top;" >
					<table style=" background-color:gray; border:2px; ">
						<tr  >
						  <td height="10px;">1111111111</td>
						</tr>
						<tr >
						  <td  height="10px;">11111111111</td>
						</tr>
						<tr >
						  <td height="10px;">1111111111</td>
						</tr>
				  </table>
			 </td>
			</tr>
		</table>
	</body>
</html>

2013年8月30日 15:22

qufulin
45
0 0 3