边框重叠的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0px;
margin: 0px;
list-style: none;
text-decoration: none;
font-family: "微软雅黑";
}
/* 问题：不明白边框在这个例子中的使用，请老师详细说明下 */
table{
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
thead tr td{
width: 100%;
height: 60px;
background-color: #169bd5;
}
thead tr td img{
margin: 10px 0;
}
.main {
border: 2px solid rgb(204, 204, 204);
border-collapse: collapse;
border-spacing: 0;
}
.tleft{
width: 12%;
position: relative;
overflow: hidden;
}
.tleft hgroup{
position: absolute;
top: 10px;
left: 5px;
line-height: 40px;
}
.tright{
width: 88%;
border: 3px solid rgb(204, 204, 204);
}
.tright .table1,.table2{
height: 50px;
border-bottom: 3px solid rgb(204, 204, 204);
}
.tright .product tr{
height: 54px;
}
.tright .product tr:first-of-type{
height: 50px;
}
.tright .product tr td{
border: 2px solid rgb(204, 204, 204);
text-align: center;
}
.product tr td img{
width: 50px;
height: 50px;
}
tfoot tr td{
width: 100%;
height: 60px;
background-color: #169bd5;
text-align: center;
color: black;
}
</style>
</head>
<body>
<table>
<!-- 页面的顶部 -->
<thead>
<tr><td><img src="images/logo.png" alt=""></td></tr>
</thead>
<!-- 页面的主体 -->
<tbody>
<tr><td>
<table class="main">
<tr>
<!-- 主体的左侧12% -->
<td class="tleft">
<hgroup>
<p>商品管理</p>
<p>评价管理</p>
<p>咨询管理</p>
<br />
<p><b>全部订单</b></p>
<p>已完成订单</p>
<p>待处理订单</p>
<p>今日物流</p>
<br />
<p>月考核</p>
<p>季度考核</p>
<p>年度考核</p>
</hgroup>
</td>
<!-- 主体的右侧88% -->
<td class="tright">
<!-- 右侧的头部文字 -->
<table class="table1">
<tr><td>  全部订单</td></tr>
</table>
<!-- 右侧中间的时间查询 -->
<table class="table2">
<tr><td><form>  查询：<input type="date">至<input type="date"></form></td></tr>
</table>
<!-- 右侧尾部的13行8列的内容 -->
<table class="product">
<tr>
<td colspan="2">宝贝信息</td>
<td>订单数量</td>
<td>单价</td>
<td>买家</td>
<td>下单时间</td>
<td>实付款</td>
<td>订单操作</td>
</tr>
<tr>
<td><img src="images/txue.png" alt=""></td>
<td>2019新款个性男女潮牌imooc慕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-19 19:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="images/xie.jpg" alt=""></td>
<td>2019新款个性男女潮牌imooc慕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-19 19:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="images/txue.png" alt=""></td>
<td>2019新款个性男女潮牌imooc慕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-19 19:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="images/xie.jpg" alt=""></td>
<td>2019新款个性男女潮牌imooc慕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-19 19:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="images/txue.png" alt=""></td>
<td>2019新款个性男女潮牌imooc慕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-19 19:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="images/xie.jpg" alt=""></td>
<td>2019新款个性男女潮牌imooc慕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-19 19:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="images/txue.png" alt=""></td>
<td>2019新款个性男女潮牌imooc慕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-19 19:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="images/xie.jpg" alt=""></td>
<td>2019新款个性男女潮牌imooc慕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-19 19:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="images/txue.png" alt=""></td>
<td>2019新款个性男女潮牌imooc慕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-19 19:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="images/xie.jpg" alt=""></td>
<td>2019新款个性男女潮牌imooc慕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-19 19:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="images/txue.png" alt=""></td>
<td>2019新款个性男女潮牌imooc慕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-19 19:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="images/txue.png" alt=""></td>
<td>2019新款个性男女潮牌imooc慕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-2-19 19:54</td>
<td>240</td>
<td>待付款</td>
</tr>
</table>
</td>
</tr>
</table>
</td></tr>
</tbody>
<!-- 页面的尾部 -->
<tfoot>
<tr><td>2019-9-21 ©imooc.com</td></tr>
</tfoot>
</table>
</body>
</html>
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星