体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

头部和脚部的宽度怎么设就只那么点。主体右侧表单的行高设置无效。感觉我的css失灵了样，咋回事？

来源：3-2 项目作业

Sherlock_bourne

2019-03-24 01:53:11

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3-2作业</title>
<link rel="stylesheet" type="text/css" href="3-2.css">
</head>
<body>
<table cellpadding="0" cellspacing="0">
<thead>

<tr>
<td><img src="logo.png" alt="logo"></td>
</tr>

</thead>

<tbody cellpadding="0" cellspacing="0">

<tr>
<td class="aside">
<p>
<a href="#">商品管理</a><br/>
<a href="#">评价管理</a><br/>
<a href="#">咨询管理</a><br/>
</p>
<p>
<a href="#all">全部订单</a><br/>
<a href="#">已完成订单</a><br/>
<a href="#">待处理订单</a><br/>
<a href="#">今日订单</a><br/>
</p>
<p>
<a href="#">月考核</a><br/>
<a href="#">季度考核</a><br/>
<a href="#">年度考核</a><br/>
</p>
</td>
<td class="content">
<table class="table1" cellpadding="0" cellspacing="0">
<tr><td><a name="all">全部订单</a></td></tr>
</table>
<table class="table2" cellpadding="0" cellspacing="0">
<tr><td>查询：<input type="date">至<input type="date"></td></tr>
</table>
<table class="table3" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">宝贝信息</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&yen;</td>
<td>小明</td>
<td>2019-2-21&nbsp;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&yen;</td>
<td>小李子</td>
<td>2019-2-21&nbsp;19:04</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr>
<td><img src="txue.png"></td>
<td>2019新款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120&yen;</td>
<td>小红</td>
<td>2019-2-21&nbsp;16:54</td>
<td>240</td>
<td>待发货</td>
</tr>
<tr>
<td><img src="xie.jpg"></td>
<td>2019新款个性男女潮牌imooc暮春之行运动鞋</td>
<td>2</td>
<td>120&yen;</td>
<td>可乐</td>
<td>2019-2-21&nbsp;14:40</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr>
<td><img src="txue.png"></td>
<td>2019新款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120&yen;</td>
<td>魏明</td>
<td>2019-2-21&nbsp;14:40</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr>
<td><img src="xie.jpg"></td>
<td>2019新款个性男女潮牌imooc暮春之行运动鞋</td>
<td>2</td>
<td>120&yen;</td>
<td>李晓雨</td>
<td>2019-2-21&nbsp;14:40</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr>
<td><img src="txue.png"></td>
<td>2019新款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120&yen;</td>
<td>艳艳</td>
<td>2019-2-21&nbsp;14:40</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr>
<td><img src="xie.jpg"></td>
<td>2019新款个性男女潮牌imooc暮春之行运动鞋</td>
<td>2</td>
<td>120&yen;</td>
<td>片片</td>
<td>2019-2-21&nbsp;14:40</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr>
<td><img src="txue.png"></td>
<td>2019新款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120&yen;</td>
<td>小兰</td>
<td>2019-2-21&nbsp;14:40</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr>
<td><img src="xie.jpg"></td>
<td>2019新款个性男女潮牌imooc暮春之行运动鞋</td>
<td>2</td>
<td>120&yen;</td>
<td>魏璎珞</td>
<td>2019-2-21&nbsp;14:40</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr>
<td><img src="txue.png"></td>
<td>2019新款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120&yen;</td>
<td>小慕</td>
<td>2019-2-21&nbsp;14:40</td>
<td>240</td>
<td>未发货</td>
</tr>
<tr>
<td><img src="txue.png"></td>
<td>2019新款个性男女潮牌imooc暮春之行文化衫</td>
<td>2</td>
<td>120&yen;</td>
<td>小苏</td>
<td>2019-2-21&nbsp;14:40</td>
<td>240</td>
<td>未发货</td>
</tr>
</table>
</td>
</tr>

</tbody>

<tfoot>
<tr>
<td><span>2019-9-21&nbsp;&copy;imooc.com</span></td>
</tr>
</tfoot>
</table>
</body>
</html>
/*全局配置*/
*{
	font-family: Arial;
	font-size: 16px;
	margin: 0;
	padding: 0;
	text-decoration: none;
}
body,thead,tbody,tfoot,table,tr,td {
margin: 0;
padding: 0;
}
table{width:100%;}



/*表头*/
table thead{
	width:100%;
	background-color:#169bd5;
}
table thead tr{
	width:100%;
}
table thead tr td{
	width: 100%;
	height: 60px;
	
}



/*表单主体*/

tbody{
	width: 100%;
}
tbody>tr>td{
	border: 1px solid gray;
}
/*主体侧栏*/
.aside{
	width: 12%;
	height: 898px;
}
/*主体右侧*/
.content{
	width: 88%;
	height: 748px;
}
.content .table3 tr td{
	height: 54px;
}


/*表尾*/
tfoot>tr>td{
	width: 100%;
	height: 60px;
	background-color:blue;
	text-align:center;
}
tfoot>tr>td>span{
	line-height: 60px; 
 	font-size: 14px;
 }


写回答

2回答

Steve007

2019-03-26

已采纳

同学，你好。

1.table的样式跟其它元素设置是不同的，比如宽高等，就直接是table的属性，直接在table里设置就可以了，不需要写在style里面。如图：

http://img.mukewang.com/climg/5c99bcc90001618307860036.jpg

写在style里面是不生效的，

2.html嵌套也存在问题，tbody里面应该嵌套一个table，table里面在写tr，td。

建议所有的css样式直接在table tr td里面设置就可以了。

<!DOCTYPE html>

<html>


<head>

<meta charset="UTF-8" />

<title></title>

</head>


<body>

<table width="100%" cellpadding="0" cellspacing="0" border="0">

<thead>

<!--导航-->

<tr height="60px" bgcolor="#169bd5">

<td><img src="img/logo.png" /></td>

</tr>

</thead>

<tbody>

<table width="100%" bgcolor="#ccc" border="0" cellpadding="0">

<tr rowspan="10" valign="top">

<!--左侧-->

<td width="12%" bgcolor="#fff">

<p>&nbsp;&nbsp;商品管理</p>

<p>&nbsp;&nbsp;评价管理</p>

<p>&nbsp;&nbsp;咨询管理</p>

<br />

<p>&nbsp;&nbsp;<b>全部订单</b></p>

<p>&nbsp;&nbsp;已完成订单</p>

<p>&nbsp;&nbsp;待处理订单</p>

<p>&nbsp;&nbsp;今日物流</p>

<br />

<p>&nbsp;&nbsp;月考核</p>

<p>&nbsp;&nbsp;季度考核</p>

<p>&nbsp;&nbsp;年度考核</p>

</td>

<!--右侧-->

<td width="88%">

<table width="100%" cellpadding="0" border="0">

<tr bgcolor="#fff" height="50px">

<td colspan="7">&nbsp;&nbsp;全部订单</td>

</tr>

</table>

<table width="100%" cellpadding="0" border="0">

<tr bgcolor="#fff" height="50px">

<td>

<form action="">

&nbsp;

<label for="">查询：</label>

<input type="date" />

<label for="">至</label>

<input type="date" />

</form>

</td>

</tr>

</table>

<table width="100%" cellpadding="0">

<tr bgcolor="#fff" height="50px" align="center">

<td colspan="2">宝贝信息</td>

<td>订单数量</td>

<td>单价</td>

<td>买家</td>

<td>下单时间</td>

<td>实付款</td>

<td>订单操作</td>

</tr>


<tr bgcolor="#fff" height="50px" align="center">

<td><img src="img/txue.png" width="50px" height="50px"/></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 bgcolor="#fff" height="50px" align="center">

<td><img src="img/xie.jpg" width="50px" height="50px"/></td>

<td>2019新款个性男女潮牌imooc慕春之行运动鞋</td>

<td>2</td>

<td>120</td>

<td>小李子</td>

<td>2019-2-21 19:04</td>

<td>240</td>

<td>未发货</td>

</tr>

<tr bgcolor="#fff" height="50px" align="center">

<td><img src="img/txue.png" width="50px" height="50px"/></td>

<td>2019新款个性男女潮牌imooc慕春之行文化衫</td>

<td>2</td>

<td>120</td>

<td>小红</td>

<td>2019-2-21 16:54</td>

<td>240</td>

<td>待发货</td>

</tr>

<tr bgcolor="#fff" height="50px" align="center">

<td><img src="img/xie.jpg" width="50px" height="50px"/></td>

<td>2019新款个性男女潮牌imooc慕春之行运动鞋</td>

<td>2</td>

<td>120</td>

<td>可乐</td>

<td>2019-2-21 14:30</td>

<td>240</td>

<td>未发货</td>

</tr>

<tr bgcolor="#fff" height="50px" align="center">

<td><img src="img/txue.png" width="50px" height="50px"/></td>

<td>2019新款个性男女潮牌imooc慕春之行文化衫</td>

<td>2</td>

<td>120</td>

<td>魏明</td>

<td>2019-2-21 14:30</td>

<td>240</td>

<td>未发货</td>

</tr>

<tr bgcolor="#fff" height="50px" align="center">

<td><img src="img/xie.jpg" width="50px" height="50px"/></td>

<td>2019新款个性男女潮牌imooc慕春之行运动鞋</td>

<td>2</td>

<td>120</td>

<td>李晓雨</td>

<td>2019-2-21 14:30</td>

<td>240</td>

<td>未发货</td>

</tr>

<tr bgcolor="#fff" height="50px" align="center">

<td><img src="img/txue.png" width="50px" height="50px"/></td>

<td>2019新款个性男女潮牌imooc慕春之行文化衫</td>

<td>2</td>

<td>120</td>

<td>艳艳</td>

<td>2019-2-21 14:30</td>

<td>240</td>

<td>未发货</td>

</tr>

<tr bgcolor="#fff" height="50px" align="center">

<td><img src="img/xie.jpg" width="50px" height="50px"/></td>

<td>2019新款个性男女潮牌imooc慕春之行运动鞋</td>

<td>2</td>

<td>120</td>

<td>片片</td>

<td>2019-2-21 14:30</td>

<td>240</td>

<td>未发货</td>

</tr>

<tr bgcolor="#fff" height="50px" align="center">

<td><img src="img/txue.png" width="50px" height="50px"/></td>

<td>2019新款个性男女潮牌imooc慕春之行文化衫</td>

<td>2</td>

<td>120</td>

<td>小兰</td>

<td>2019-2-21 14:30</td>

<td>240</td>

<td>未发货</td>

</tr>

<tr bgcolor="#fff" height="50px" align="center">

<td><img src="img/xie.jpg" width="50px" height="50px"/></td>

<td>2019新款个性男女潮牌imooc慕春之行运动鞋</td>

<td>2</td>

<td>120</td>

<td>魏璎珞</td>

<td>2019-2-21 14:30</td>

<td>240</td>

<td>未发货</td>

</tr>

<tr bgcolor="#fff" height="50px" align="center">

<td><img src="img/txue.png" width="50px" height="50px"/></td>

<td>2019新款个性男女潮牌imooc慕春之行文化衫</td>

<td>2</td>

<td>120</td>

<td>小慕</td>

<td>2019-2-21 14:30</td>

<td>240</td>

<td>未发货</td>

</tr>

<tr bgcolor="#fff" height="50px" align="center">

<td><img src="img/txue.png" width="50px" height="50px"/></td>

<td>2019新款个性男女潮牌imooc慕春之行文化衫</td>

<td>2</td>

<td>120</td>

<td>小苏</td>

<td>2019-2-21 14:30</td>

<td>240</td>

<td>未发货</td>

</tr>

<!---->

</table>

</td>

</tr>

</table>

</tbody>

<tfoot>

<table width="100%" cellpadding="0" border="0" cellspacing="0">

<tr height="60px" bgcolor="#169bd5" align="center">

<td>2019-9-21 &copy;imooc.com</td>

</tr>

</table>

</tfoot>

</table>

</body>


</html>

祝学习愉快！

0
hherlock_bourne
h 才看到~不好意思~哦哦，原来这样设置啊！感谢老师！
h019-03-30
共1条回复

Miss路

2019-03-24

同学，你好。需要给tbody里面，tr外面嵌套一个table就好了，另外记得把表格里面的商品图片加一下宽高，设置为50px就可以了。

如果帮助到了你，欢迎采纳！

祝学习愉快！

0
hherlock_bourne
h 我最先就是有<table>，设置样式时，无效，才看之前的问答，看到一个老师说把tbody后的table去掉，直接跟tr，再跟td，再跟table 。老师你把我的代码跑跑看吧，看看是HTML嵌套的问题，还是css选择器的问题，等。我感觉我的CSS除了通配符设置有效，其他嵌套的比较多的元素设置都无效。
h019-03-25
共1条回复

0 学习 · 40143 问题

查看课程

相似问题

老师为什么我的表格高度宽度都设置了没反应呢？

回答 2

老师，请教两个问题：1、中间部分左侧为什么跑中间去了。2、为什么右侧实际高度是50.4？

回答 4

请检查我的！老师有一处不对，banner的背景宽度设成1400多了，超过了头部和主体1200的宽度。

回答 1

我没设置表格的单元格宽高，怎么被字自动撑起来的（有间隙）？

回答 1

老师，我想问一下1.我的页脚部分css为什么没有用。2.我注释掉的css代码应该怎样写呢？

回答 2

打开慕课网App查看更多内容