老师啊,左边表格上面边框还是有问题。。
左边表格上面边框还是有问题。。完了td内的图片位置不太居中
*{padding: 0; margin: 0;font-family: "Arial";}
body{width: 100%;}
/*页头页尾设置*/.container{
background-color: #169bd5;
height: 60px;
width: 100%;
text-align: center;
line-height: 60px;
}
/*页头图片*/.container img{display: block; float: left; margin: 10px 0;}
/*页身表格*/.table_body{margin-top:-5px;
width: 100%;
height: 100%;
border: 1px solid gray;
border-top-margin:-1px;
border-bottom-margin:-1px;
border-collapse: collapse;}
/*页身左表格*/.table_body tr .aside{width:12%;height: 100%;}
.table_body tr .aside p{margin:20px 10px;}
.table_body tr .aside .sp{font-weight:bolder;}
/*页身右表格*/.table_body tr .article{width:8px;height: 100%; border: 2px solid gray;}
/*右表格上两行*/.all_order,.search{width: 100%; height: 49px; line-height: 49px; border-bottom: 2px solid gray;}
/*右表格主要内容*/.detail{width: 100%; border-collapse:collapse;}
.detail .name td{height:49px; line-height:49px; text-align:center;}
.detail tr td{border:1px solid gray;height:53px; line-height:53px; text-align:center;}
.detail tr td img{display:block; max-height:53px; width:45px; margin-left:14px;}
<!DOCTYPE html>
<html>
<head>
<title>Assignment</title>
<link rel="stylesheet" type="text/css" href="table.css">
</head>
<body>
<table>
<thead><!-- This is header -->
<div class = "container">
<img src="logo.png"/>
</div>
</thead>
<tbody><!-- This is body -->
<table class = "table_body">
<tr>
<td class="aside"><!-- Left side of body -->
<p>商品管理</p>
<p>评价管理</p>
<p>咨询管理</p><br/><br/>
<p class="sp">全部订单</p>
<p>已完成订单</p>
<p>待处理订单</p>
<p>今日物流</p><br/><br/>
<p>月考核</p>
<p>季度考核</p>
<p>年度考核</p>
</td>
<td class="article"><!-- Right side of body -->
<table class="all_order">
<tr>
<td>全部订单</td>
</tr>
</table>
<table class="search">
<tr>
<td>查询:<input type="date" name="date"/>至<input type="date" name="date"/></td>
</tr>
</table>
<table class="detail">
<tr class="name">
<td></td>
<td>宝贝信息</td>
<td>订单数量</td>
<td>单价</td>
<td>买家</td>
<td>下单时间</td>
<td>实付款</td>
<td>订单操作</td>
</tr>
<tr>
<td><img src="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="xie.jpg"></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="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="xie.jpg"></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="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="xie.jpg"></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="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="xie.jpg"></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="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="xie.jpg"></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="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="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>
</table>
</td>
</tr>
</table>
</tbody>
<tfoot><!-- This is footer -->
<div class="container">
<p>2019-9-21 ©Imooc.com</p>
</div>
</tfoot>
</table>
</body>
</html>
正在回答
同学你好,解答如下:
(1)左边表格上面边框还是有问题,请问是说这里吗?
建议与右边一样,设置边框即可:
(2)可以参考如下设置:
后面会讲到该方法哦。
如果我的回答帮到了你,欢迎采纳,祝学习愉快~
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星