想问下tfoot标签为什么失效了，还是我代码写错？ 请老师帮忙看下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="css/index.css"> </head> <body> <table cellspacing="0"> <!-- 顶部 --> <thead> <tr bgcolor="#169bd5" height="60px"> <td><img src="img/logo.png" alt="logo"></td> </tr> </thead> <!-- 顶部end --> <!-- 主体 --> <tbody> <table class="main" cellspacing="0"> <tr> <td width="12%"> <!-- 主体左侧 --> <p>商品管理</p> <p>评价管理</p> <p>咨询管理</p> <br><br> <strong>全部订单</strong> <p>已完成订单</p> <p>待处理订单</p> <p>今日物流</p> <br> <p>月考核</p> <p>季度考核</p> <p>年度考核</p> </td> <td class="main-right" widt="88%"> <!-- 主体右侧 嵌套3个table--> <table> <!-- 全部订单 --> <tr> <td> 全部订单</td> </tr> </table> <table> <!-- 时间查询部分 --> <tr> <td> 查询：<input type="date"> 至 <input type="date"> </td> </tr> </table> <table class="main-r-orderList" rules="all"> <!-- 订单列表 --> <tr> <td colspan="2" height="54px">宝贝信息</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:45</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:05</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:55</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:45</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:45</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:45</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:45</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:45</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:45</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:45</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:45</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:45</td> <td>240</td> <td>未发货</td> </tr> </table> </td> </tr> </table> </tbody> <!-- 主体 end--> <!-- 页脚 --> <tfoot> <tr> <td>2019-9-21 ©imooc.com</td> </tr> </tfoot> </table> </body> </html>
0
收起
正在回答
4回答
同学你好，
1. tfoot失效是以为标签嵌套不规范，导致浏览器解析的出现异常。
可以打开浏览器查看解析的html结构哦，如下图所示：页脚内容没有在标签内哦
建议修改： 按照表格的嵌套规则 table> thead/tbody/tfoot > tr > td， 所以在主体部分在嵌套一个tr>td标签
效果图:
2. cellspacing是设置单元格与单元格之间的间距， 需要再添加cellpadding属性处理单元格内容与其边框之间的空白。建议修改：
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~~~
慕丝1342
2019-07-31 15:37:30
table{width:100%;}
td{vertical-align: top;} /* 垂直方式：顶部对齐 */
thead td img{padding:10px 0;} /* logo垂直居中 */
/* 主体部分 */
.main{
border:2px solid #ccc;
padding-left: 10px;
height:800px;
}
.main-right table{ border:2px solid #ccc;}
.main-right tr{height:50px; line-height:50px;}
.main-r-orderList td:first-of-type{
width:109px; height:54px;
text-align: center;
vertical-align:middle;
}
.main-r-orderList td{text-align: center;}
.main-right td img{height:50px; margin-bottom:-18px;}
/* 页脚 */
tfoot tr td{
background-color: #169bd5;
height:60px;
line-height:60px;
text-align:center;
}css样式
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星