老师帮忙看下头部和列宽分配问题怎么解决，谢谢

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<table >
<!--头部-->
<thead>
<tr>
<td colspan="2"> <img src="img/logo.png"/> </td>
</tr>
</thead>
<!--主体内容-->
<tbody>
<tr>
<td class="left">
<br/>
<p>商品管理</p>
<p>评价管理</p>
<p>咨询管理</p>
<br/><br/>
<p class="order">全部订单</p>
<p>已完成订单</p>
<p>待处理订单</p>
<p>今日物流</p>
<br/><br/>
<p>月考核</p>
<p>季度考核</p>
<p>年度考核</p>
</td>
<td class="right">
<table class="all-order"><tr><td>全部订单</td></tr></table>
<table class="search"><tr>
<td>查询：<input type="date" name="start-date">至<input type="date" name="end-date"></td>
</tr></table>
<table class="information">
<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>240</td>
<td>2019-2-21 21:54</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>240</td>
<td>2019-2-21 19:04</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>240</td>
<td>2019-2-21 16:54</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>240</td>
<td>2019-2-21 14:30</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>240</td>
<td>2019-2-21 14:30</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>240</td>
<td>2019-2-21 14:30</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>240</td>
<td>2019-2-21 14:30</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>240</td>
<td>2019-2-21 14:30</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>240</td>
<td>2019-2-21 14:30</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>240</td>
<td>2019-2-21 14:30</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>240</td>
<td>2019-2-21 14:30</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>240</td>
<td>2019-2-21 14:30</td>
<td>未发货</td>
</tr>
</table>
</td>
</tr>
</tbody>

<!--页脚-->
<tfoot>
<tr>
<td colspan="2">2019-9-21 &copy;imooc.com</td>
</tr>
</tfoot>
</table>

</body>
</html>

*{padding: 0;margin:0;}
table {border-collapse: collapse;
	width: 100%;
}
/*头部和页脚*/  /*为什么页脚没问题，头部背景只有一个单元格宽度，已经设置了合并两列单元格了*/
table thead tr,table tfoot tr{
	width: 100%;
	height: 50px;
	background-color: #009DDB;
}
table thead tr,table tfoot tr td img{
	display: block;
}
table tfoot tr{text-align: center;}

/*头主体内容*/
/*左侧菜单*/
tbody tr{
	width: 100%;
}
table tbody tr td{
	vertical-align: top;
	width: 12%;
}


table tbody tr td p{
	line-height: 40px;
	margin-left: 10px;
	font-size: 16px;
}
table tbody tr td p.order{
	font-weight: bold;
}
/*右侧表格区*/
tbody td.right{
	width: 88%;
	font-size: 14px;
}

tbody td.right table.all-order td,tbody td.right table.search td{width
	width: 100%;
	border: 1px solid #CCCCCC;
	height: 40px;
	vertical-align: middle;
	padding-left: 10px;
}
tbody td.right table.information{
	text-align: center;
	border: 1px solid #CCCCCC;
}
tbody td.right table.information td{
	border: 1px solid #CCCCCC;
	height: 50px;
	vertical-align: middle;
	white-space: nowrap;  /*规定段落中的文本不进行换行,达到让表格列宽根据文字自适应宽度*/
	padding: 0 10px;
}
tbody img{
	height: 50px;
	width: 50px;
}

技术为王2383098363 2019-07-25

源自：项目：H5布局 3-2 项目作业

收起

2回答

好帮手慕星星回答被采纳获得+3积分 2019-07-26 10:09:35

同学你好，

粘贴的代码中顶部效果没有实现的原因是设置了block块，没有表格特性了。这里可以去掉：

“梨不开的桃子”老师的意思是将中间tbody内容也变成一列显示，中间嵌套一个table，这样就不用合并成两列了。可以再测试下。

祝学习愉快！

收起回答

技术为王2383098363 提问者 #1

解决了谢谢老师

2019-07-28 17:08:03

好帮手慕码 2019-07-25 19:39:12

同学你好！

顶部：主体内容下tbody中添加tr/td/table标签

列宽这样分配就是可以的

如果帮助到了你欢迎采纳祝学习愉快~

收起回答

提问者技术为王2383098363 #1

老师你好：你的意思是最外层是一个三行一列的表格吗，然后中间主体的内容全部在嵌套的表格里？我目前的代码最外层是按照两行两列的的表格搭建的，首行和末行进行了合并单元格，不知道为什么末尾没问题，首行出现了问题，代码都是一样的。

2019-07-25 21:11:46