我没设置表格的单元格宽高，怎么被字自动撑起来的（有间隙）？
@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%"] > 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;}
.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%">
<!--头部-->
<thead bgcolor="#169bd5">
<tr>
<th><img src="img/logo.png" alt="logo"></th>
</tr>
</thead>
<!--身体-->
<tbody>
<tr>
<td>
<table class="section" frame="border" rules="all">
<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>
正在回答
同学你好，表格单元格有高度是因为content设置了文字的行高，如下：
去掉这个行高单元格的高度就会变低
如果我的回答帮助了你，希望采纳，祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星