老师啊,左边表格上面边框还是有问题。。

老师啊,左边表格上面边框还是有问题。。

左边表格上面边框还是有问题。。完了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&nbsp;&copy;Imooc.com</p>

</div>

</tfoot>

</table>

</body>

</html>



正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,解答如下:

(1)左边表格上面边框还是有问题,请问是说这里吗?

http://img1.sycdn.imooc.com//climg/5ec632be09e7f39502580069.jpg

建议与右边一样,设置边框即可:

http://img1.sycdn.imooc.com//climg/5ec63303093f65a403370134.jpg

(2)可以参考如下设置:

http://img1.sycdn.imooc.com//climg/5ec633330945411700000000.jpg

后面会讲到该方法哦。

如果我的回答帮到了你,欢迎采纳,祝学习愉快~ 

  • Darkholme 提问者 #1
    左边表格文字位置和要求的还是有出入,是不要设置垂直居中吗?
    2020-05-21 16:06:58
好帮手慕码 2020-05-21 18:09:22

同学你好,请问是这一块内容吗?

http://img1.sycdn.imooc.com//climg/5ec6525b09c995ab02690761.jpg

这样实现就是可以的,不需要实现垂直居中。祝学习愉快~

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师