老师为什么我的表格高度宽度都设置了没反应呢？
来源：3-2 项目作业
weixin_慕仰4083625
2019-08-20 19:51:20
html
<!DOCTYPE html> <html> <head> <title>3-2作业</title> <link rel="stylesheet" type="text/css" href="3-2css.css"> </head> <body> <table class="body"> <thead> <tr> <td><img src="img/logo.png"/></td> </tr> </thead> <tbody> <table> <tr> <td> <p>商品管理</p> <p>评价管理</p> <p>咨询管理</p> <br/> <br/> <p>全部订单</p> <p>已完成订单</p> <p>待处理订单</p> <p>今日物流</p> <br/> <br/> <p>月考核</p> <p>季度考核</p> <p>年度考核</p> </td> <td> <table class="dingdan"> <tr> <td>全部订单</td> </tr> </table> <table class="chaxun"> <tr> <td>查询：<input type="date" name="date"/>至<input type="date" name="date"/></td> </tr> </table> <table class="list"> <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 19：04</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 16：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 14：30</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 14：30</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 14：30</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 14：30</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 14：30</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 14：30</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 14：30</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 14：30</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 14：30</td> <td>240</td> <td>未发货</td> </tr> </table> </td> </tr> </table> </tbody> <tfoot> <tr> <td>2019-9-21 ©imooc.com</td> </tr> </tfoot> </table> </body> </html>
css
*{padding: 0;margin: 0;}
table{border:1px solid;width: 100%;}
tr,td{border:1px solid;}
thead tr{height: 60px;background-color: #169bd5;}
thead img{line-height: 60px;}
tbody td:nth-of-type(1) {width: 12%;vertical-align: top;}
tbody td:nth-of-type(2) {width: 88%;}
tbody td:nth-of-type(1) p{padding-left: 10px;padding-top: 10px;}
tbody td:nth-of-type(1) p:nth-of-type(4){font-weight: bold;}
.dingdan tr{height: 50px;}
.chaxun tr{height: 50px;}
.list img{height: 54px;}
.list tr:nth-of-type(1) td:nth-of-type(1){height: 54px;width: 200px;}写回答
2回答
-
好帮手慕糖
2019-08-21
同学你好，1、是指如下这里是吗？
这个样式是有的，设置也是对的，但是宽高度无效是因为其他设置的宽度对这个参数了影响。就是如下这个，“订单数量”（就是这个表格中的第二列）这一列中的宽度，也会有这个的影响。
而表格的话，不是设置多少就准确的是多少，当宽度或者高度的不够的时候，会重新分配哦。
2、列表高度是指？可以具体描述下哦。
3、建议：这里修改的话，直接将上面的88%，这个样式使用类设置，或者添加到对应表格的标签中即可。
希望能帮助到你，祝学习愉快！
0 -
好帮手慕糖
2019-08-21
同学你好，1、表格table设置的高度是有效的哦。同学说的没有反应具体是指那个表格，或者说是哪一块，可以具体的描述下哦。
2、另，下面这里缺少tr与td标签哦。因为分组tbody标签下应该是行标签tr，行标签下是列标签，其他嵌套的标签要存放在td标签下哦。所以如下的这个表格要嵌套在td标签中。
希望能帮助到你，祝学习愉快！
0h019-08-21
相似问题