老师我右侧下方表格高度好像有点问题，但是用box-sizing也解决不了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<style>*{
margin: 0;
padding: 0;
font-size: 14px;
font-family: "微软雅黑";
}
thead,tfoot{
width: 100%;
height: 60px;
background-color: #169BD5;
}
tbody{
width: 100%;
border: 2px solid gray
}
.container{
width: 100%;
border:1px solid #ccc;
}
.left{
width: 12%
}
.left p,.left h1{
font-size: 16px;
line-height: 1.5em;
margin: 10px 0 0 10px;
}
.right{
width: 88%;
border:1px solid #ccc;
}
.right-order,.right-time,.right-list{
width: 100%;
border:1px solid #ccc;
box-sizing:border-box;
}
.special td{
height: 50px;
text-align: center;
box-sizing:border-box;
}
.right-order td,.right-time td{
height: 50px;
line-height: 50px;
padding-left: 10px;
box-sizing:border-box;
}
.right-list td{
height: 54px;
text-align: center;
border: 1px solid gray;
box-sizing:border-box;
}
.right-list img{
height: 50px;
}</style>
</head>
<body>
<!-- 页面 -->
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<!-- 页头部分 -->
<thead>
<tr>
<td>
<a href="#"><img src="../img/logo.png" alt="logo"></a>
</td>
</tr>
</thead>
<!-- 页面主体部分 -->
<tbody>
<tr>
<td>
<table class="container">
<tr>
<!-- 左侧 -->
<td class="left" valign="top">
<p>商品管理</p>
<p>评价管理</p>
<p>咨询管理</p><br><br>
<h1>全部订单</h1>
<p>已完成订单</p>
<p>待处理订单</p>
<p>今日物流</p><br><br>
<p>月考核</p>
<p>季度考核</p>
<p>年度考核</p>
</td>
<!-- 右侧 -->
<td class="right">
<!-- 右侧上方表格 -->
<table class="right-order">
<tr>
<td>全部订单</td>
</tr>
</table>
<!-- 右侧中间表格 -->
<table class="right-time">
<tr>
<td>
查询：<input type="date" name="date1">至<input type="date" name="date2">
</td>
</tr>
</table>
<!-- 右侧下方表格 -->
<table class="right-list" cellpadding="0" cellspacing="0">
<tr class="special">
<td colspan="2">宝贝信息</td>
<td>订单数量</td>
<td>单价</td>
<td>买家</td>
<td>下单时间</td>
<td>实付款</td>
<td>订单操作</td>
</tr>
<tr>
<td><img src="../img/txue.png" alt="txue"></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="../img/xie.jpg" alt="xie"></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="../img/txue.png" alt="txue"></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="../img/xie.jpg" alt="xie"></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="../img/txue.png" alt="txue"></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="../img/xie.jpg" alt="xie"></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="../img/txue.png" alt="txue"></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="../img/xie.jpg" alt="xie"></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="../img/txue.png" alt="txue"></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="../img/xie.jpg" alt="xie"></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="../img/txue.png" alt="txue"></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="../img/txue.png" alt="txue"></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 align="center" width="100%" height="60px">
2019-9-21 ©imooc.com
</td>
</tr>
</tfoot>
</table>
</body>
</html>0
收起
正在回答
3回答
同学你好， 这是因为img标签自带间距造成的。可以给img标签设置display：block;属清除间距。
建议： 参照老师上次回答的修改代码
修改后的效果图：
另， 建议： 同学以后提问可以像下图所示的方式， 直接描述想要实现的效果， 便于老师高效的为你解决问题
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星