老师，请教两个问题：1、中间部分左侧为什么跑中间去了。2、为什么右侧实际高度是50.4？
*{
padding:0;
margin:0;
}
table.main{
width:100%;
}
/*设置头部样式*/
thead{
width:100%;
height:60px;
background-color: #169bd5;
}
thead td{
height:60px;
}
/*设置中间样式*/
tbody .container{
width:100%;
border:1px solid #ccc;
}
/*设置中间左侧部分样式*/
tbody .container .con-left{
width:12%;
}
tbody .container .con-left p{
font-size:16px;
line-height:1.5em;
margin:10px 0 0 10px;
}
tbody .container .con-left p.special{
font-weight:700;
}
/*设置中间右侧部分样式*/
.con-right{
width:88%;
border:1px solid #ccc;
}
/*为右侧底部三个表格设置边框*/
.all-orders,.time-query,.order-list{
width:100%;
border:1px solid #ccc;
box-sizing:border-box;
}
.all-orders td,.time-query td{
height:50px;
line-height:50px;
padding-left:10px;
}
.time-query td{
height:50px;
line-height:50px;
padding-left:10px;
}
.order-list td{
height:54px;
border:1px solid #ccc;
text-align:center;
}
.order-list img{
height:54px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第三份作业</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<table cellspacing="0" cellpadding="0" class="main">
<!-- 头部 -->
<thead>
<tr>
<td>
<img src="images/logo.png">
</td>
</tr>
</thead>
<!-- 主体部分 -->
<tbody>
<tr>
<td>
<table class="container" cellspacing="0" cellpadding="0">
<tr>
<!-- 左侧部分 -->
<td class="con-left">
<p>商品管理</p>
<p>评价管理</p>
<p>咨询管理</p>
<br />
<p class="special">全部订单</p>
<p>已完成订单</p>
<p>待处理订单</p>
<p>今日物流</p>
<br />
<p>月考核</p>
<p>季度考核</p>
<p>年度考核</p>
</td>
<!-- 右侧部分 -->
<td class="con-right">
<table class="all-orders" cellspacing="0" cellpadding="0">
<tr>
<td>全部订单</td>
</tr>
</table>
<table class="time-query" cellspacing="0" cellpadding="0">
<tr>
<td>
查询：<input type="date" name="date1"> 至 <input type="date" name="date2"> </td>
</tr>
</table>
<table class="order-list" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" class="special">宝贝信息</td>
<td>订单数量</td>
<td>单价</td>
<td>买家</td>
<td>下单时间</td>
<td>实付款</td>
<td>订单操作</td>
</tr>
<tr>
<td>
<img src="images/txue.png">
</td>
<td>2019新款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-21 21：54</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="images/xie.jpg"></td>
<td>2019新款个性男女潮牌imooc暮春之行运动鞋</td>
<td>2</td>
<td>120</td>
<td>小李子</td>
<td>2019-2-21 19：04</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr>
<td><img src="images/txue.png"></td>
<td>2019新款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小红</td>
<td>2019-2-21 16：54</td>
<td>240</td>
<td>待发货</td>
</tr>
<tr>
<td><img src="images/xie.jpg"></td>
<td>2019新款个性男女潮牌imooc暮春之行运动鞋</td>
<td>2</td>
<td>120</td>
<td>可乐</td>
<td>2019-2-21 14：30</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr>
<td><img src="images/txue.png"></td>
<td>2019新款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>魏明</td>
<td>2019-2-21 14：30</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr>
<td><img src="images/xie.jpg"></td>
<td>2019新款个性男女潮牌imooc暮春之行运动鞋</td>
<td>2</td>
<td>120</td>
<td>李晓雨</td>
<td>2019-2-21 14：30</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr>
<td><img src="images/txue.png"></td>
<td>2019新款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>艳艳</td>
<td>2019-2-21 14：30</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr>
<td><img src="images/xie.jpg"></td>
<td>2019新款个性男女潮牌imooc暮春之行运动鞋</td>
<td>2</td>
<td>120</td>
<td>片片</td>
<td>2019-2-21 14：30</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr>
<td><img src="images/txue.png"></td>
<td>2019新款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小兰</td>
<td>2019-2-21 14：30</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr>
<td><img src="images/xie.jpg"></td>
<td>2019新款个性男女潮牌imooc暮春之行运动鞋</td>
<td>2</td>
<td>120</td>
<td>魏璎珞</td>
<td>2019-2-21 14：30</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr>
<td><img src="images/txue.png"></td>
<td>2019新款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小慕</td>
<td>2019-2-21 14：30</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr>
<td><img src="images/xie.jpg"></td>
<td>2019新款个性男女潮牌imooc暮春之行运动鞋</td>
<td>2</td>
<td>120</td>
<td>小苏</td>
<td>2019-2-21 14：30</td>
<td>240</td>
<td>未发货</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<!-- 底部 -->
<tfoot>
<tr><td></td></tr>
</tfoot>
</table>
</body>
</html>
正在回答 回答被采纳积分+1
你好同学，解答如下：
1.是指的右侧第一table表格的高度对吗？因为代码中是高度50px是给td设置的，但是一个表格的高度不光包含它里面的td高度，还有表格的默认间隙和边框，肯定是高于你给td设置的50px哦。例如老师这里测试的是52px:
当然了，因为不同浏览器自带的样式有差异，可以解析的高度会有一些小差别。
2.同学说最后一个table中td设置的高度是50px，但是问题提供的代码中，最后一个table中td高度设置的是54px,如下：
以上同学自己再确认一下。另外，导致这个现象的原因如下：
当一个td中的内容超出了你设置的高度时，这个高度就不会无效，而是被内容撑开。代码中也是，第一行是文字，所以显示的高度正常。从第二行开始有图片了，图片本身的高度为54px ,图片有默认的间隙，加起来超出了54px。所以和上面的高度就不一样了哦。
（说明：图片的默认间隙是行内元素的一个特殊现象，是由于img标签换行导致的.不同浏览器解析的默认间隙可能有一点差别，一般在2px左右）
你可以给图片设置成块元素，或者给图片设置小一点显示。这样就能和上面的td高度一致了。
祝学习愉快，望采纳。
知道左侧问题了，table里的td是默认垂直居中的，想要上对齐，设置vertical-align:top.就可以了。但是右侧我仔细看了下，感觉是table的默认line-height，导致的，目前还没有找到怎么解决，请老师帮忙讲解下。另外还有个小问题，作业里右侧的高度是td的还是table的呢？
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星