为什么我的主体内容右侧上下会有空白间隔呢？还有三个表格边框怎么搞成跟效果图一样粗细都相等呢？
来源：3-2 项目作业
慕婉清6507108
2020-05-12 13:49:43
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style>
/*重置样式*/
*{margin:0;padding:0;font-size:14px;}
table{border-collapse:collapse;border-color:#000;}
/*头部*/
thead tr td{width:100%;height:80px;background: #169bd5;}
/*主体内容左侧*/
tbody tr .left{width:12%;overflow: hidden;}
/*主体内容右侧*/
tbody tr .right{width:88%;overflow: hidden;}
/*右侧订单*/
tbody tr td .dingdan{width:100%;height:50px;line-height: 50px;border: 2px solid #000;box-sizing: border-box;}
tbody tr td .dingdan td{padding-left:10px}
/*右侧查询*/
tbody tr td .chaxun{width:100%;height:50px;border:2px solid #000;}
/*右侧信息*/
tbody tr td .xinxi{width:100%;border:2px solid #000;}
tbody tr td .xinxi td{height:54px}
tbody tr td .xinxi img{height:50px}
/*底部*/
tfoot tr td{width:100%;height:60px;background:#169bd5;}
</style>
</head>
<body>
<table border="0" width="100%" height="1000" cellpadding="0" cellspacing="0">
<thead>
<tr><td colspan="2"><img src="./img/logo.png"/></td></tr>
</thead>
<tbody>
<tr>
<td class="left">
<p>商品管理</p>
<p>评价管理</p>
<p>咨询管理</p>
<p>全部订单</p>
<p>已完成订单</p>
<p>待处理订单</p>
<p>今日物流</p>
<p>月考核</p>
<p>季度考核</p>
<p>年度考核</p>
</td>
<td class="right">
<table class="dingdan">
<tr><td>全部订单</td></tr>
</table>
<table class="chaxun">
<tr><td>查询：<input type="date" />至<input type="date" /></td></tr>
</table>
<table class="xinxi">
<tr>
<td colspan="2">宝贝信息</td>
<td>订单数量</td>
<td>单价</td>
<td>买家</td>
<td>下单时间</td>
<td>实付款</td>
<td>订单操作</td>
</tr>
<tr>
<td><img src="./img/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="./img/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="./img/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="./img/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="./img/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="./img/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="./img/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="./img/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="./img/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="./img/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="./img/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="./img/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>
</table>
</td>
</tr>
</tbody>
<tfoot><tr><td colspan="2" align="center">2019-9-21 ©imooc.com</td></tr></tfoot>
</table>
</body>
</html>
1回答
-
同学你好，对于你的问题解答如下：
因为给外层表格设置了固定的高度，但实际内容没有那么高，默认是垂直居中对齐，所以导致右侧内容上边多出部分空白。
建议：去掉table标签上的height属性，让其由内容撑开高度就可以了
效果图只是一个参考，同学这样实现效果就是可以的了，如果想要实现边框粗细相同的效果， 可以给右侧单元格设置边框样式。示例：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题