捋一捋，出来2个问题
我现在突然忘记了自己的边框效果是怎么出来的？（粗的大边框和具体内容的小边框，帮我捋一捋）
.content img{width: 54px;height: 54px;vertical-align: middle;}有没有起到效果？为什么会水平居中？
@charset "utf-8";
/* CSS Document */
/*all*/
thead,tfoot{margin: 0;padding: 0;display: block;}
/*thead*/
thead{height: 60px;}
thead img{float: left;margin: 10px;}
/*tbody*/
tbody .section{width: 100%;}
tbody .section tr[valign="top"] td[width="12%"]{border: 3px solid #ccc;}
tbody .section tr[valign="top"] td[width="12%"] > p{padding-left: 20px;}
tbody .section table[bordercolor="#ccc"]:first-child td{padding-left: 20px;}
tbody .section table[bordercolor="#ccc"]:nth-child(2) td{padding-left: 20px;line-height: 54px;}
.bold{font-weight: bolder;}
.content{line-height: 54px;}
.content img{width: 54px;height: 54px;vertical-align: middle;}
.content td{text-align: center;}
/*tfoot*/
tfoot{height: 60px;}
tfoot td{line-height: 60px;}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/index.css">
<title>无标题文档</title>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0">
<!--头部-->
<thead bgcolor="#169bd5">
<tr>
<th><img src="img/logo.png" alt="logo"></th>
</tr>
</thead>
<!--身体-->
<tbody>
<tr>
<td>
<table class="section" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="12%">
<p>商品管理</p>
<p>评价管理</p>
<p>咨询管理</p><br>
<p class="bold">全部订单</p>
<p>已完成订单</p>
<p>待处理订单</p>
<p>今日物流</p><br>
<p>月考核</p>
<p>季度考核</p>
<p>年度考核</p>
</td>
<td width="88%">
<table width="100%" cellspacing="0" cellpadding="0" bordercolor="#ccc" border="2">
<tr>
<td><p>全部订单</p></td>
</tr>
</table>
<table width="100%" cellspacing="0" cellpadding="0" bordercolor="#ccc" border="2">
<tr>
<td>查询：<input type="date">至<input type="date"></td>
</tr>
</table>
<table width="100%" class="content" cellspacing="0" cellpadding="0" bordercolor="#ccc" border="2">
<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 21:54</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 21:54</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 21:54</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 21:54</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 21:54</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 21:54</td>
<td>240</td>
<td>待付款</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<!--脚部-->
<tfoot bgcolor="#169bd5" align="center">
<tr>
<td>2019-9-21 ©imooc.com</td>
</tr>
</tfoot>
</table>
</body>
</html>
正在回答
同学你好，问题解答如下：
1、如果只给table表格添加上边框颜色属性，浏览器解析默认有3px，例如：
如果加上border属性，那么就会按照按照border计算，代码中没有合并边框，所以内外边框加在一起了：
看起来好像和你实现的代码有点不一样：
这是因为两个表格挨着的结果，边框加在一起，看起来就粗了。
2、你把单元格高度加大，就能看出效果，图片垂直居中显示了：
水平居中样式是你在css代码中设置的：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星