老师为什么tfoot设置不出来
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第三次项目作业</title>
<style>
*{padding: 0;margin: 0;font-size: 13px;font-family: "黑体";}
.rone,.rtwo{border-bottom: 3.5px solid lightgray;}
.rthree td{border-bottom: 2.5px solid lightgray;border-right: 2.5px solid lightgray;text-align: center;}
.left{border: 2.5px solid lightgray;padding-left: 10px;padding-bottom: 460px;}
.right{border: 2px solid lightgray;}
table tfoot{height: 60px;background-color: steelblue;display: block;}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" width="100%">
<!--thead-->
<thead>
<tr height="60px" bgcolor="steelblue" width="100%">
<td><img src="img/logo.png" /></td>
</tr>
</thead>
<!--tbody-->
<tbody>
<table width="100%" cellspacing="0" class="main"><!--主体部分整体表格-->
<tr>
<td width="12%" class="left"> <!--左侧-->
<p>商品管理</p>
<br />
<p>评价管理</p>
<br />
<p>咨询管理</p>
<br />
<br />
<br />
<br />
<p><b>全部订单</b></p>
<br />
<p>已完成订单</p>
<br />
<p>待处理订单</p>
<br />
<p>今日物流</p>
<br />
<br />
<br />
<br />
<p>月考核</p>
<br />
<p>季度考核</p>
<br />
<p>年度考核</p>
<br />
</td>
<td width="88%" class="right"> <!--右侧-->
<table width="100%" class="rone" cellspacing="0"> <!--全部订单-->
<tr height="50px">
<td> 全部订单</td>
</tr>
</table>
<table width="100%" cellspacing="0" class="rtwo"> <!--查询时间-->
<tr height="50px">
<td> 查询:<input type="date" name="date" /> 至 <input type="date" name="date" /></td>
</tr>
</table>
<table width="100%" class="rthree" cellspacing="0"> <!--订单列表-->
<tr border="3px solid gray">
<td colspan="2" height="50px" align="center">宝贝信息</td>
<!--<td></td>-->
<td>订单数量</td>
<td>单价</td>
<td>买家</td>
<td>下单时间</td>
<td>实付款</td>
<td>订单操作</td>
</tr>
<tr>
<td ><img width="55.7px" height="54px" 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 width="55.7px" height="54px" 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 width="55.7px" height="54px" 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 width="55.7px" height="54px" 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>
<td><img width="55.7px" height="54px" 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 width="55.7px" height="54px" 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 width="55.7px" height="54px" 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 width="55.7px" height="54px" 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 width="55.7px" height="54px" 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 width="55.7px" height="54px" 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 width="55.7px" height="54px" 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 width="55.7px" height="54px" 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>
</table>
</td>
</tr>
</table>
</tbody>
<!--tfoot-->
<tfoot>
<tr>
<td><p>2019-9-21 ©imooc.com</p></td>
</tr>
</tfoot>
</table>
</body>
</html>
<tfoot>
正在回答
你好,是tbody中的内容需要放在td中,不能直接嵌套table表格哦,如下:
自己添加测试下,祝学习愉快!
你好,这次的代码嵌套还是有问题的,可以参考下面的代码进行修改:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>第三次项目作业</title> <style> *{padding: 0;margin: 0;font-size: 13px;font-family: "黑体";} .rone,.rtwo{border-bottom: 3.5px solid lightgray;} .rthree td{border-bottom: 2.5px solid lightgray;border-right: 2.5px solid lightgray;text-align: center;} .left{border: 2.5px solid lightgray;padding-left: 10px;padding-bottom: 460px;} .right{border: 2px solid lightgray;} /*将设置的块元素和高度去掉*/ table tfoot{background-color: steelblue;} </style> </head> <body> <table cellpadding="0" cellspacing="0" width="100%"> <!-- 将thead,tbody和tfoot写在外面,里面嵌套tr和td --> <thead> <tr height="60px" bgcolor="steelblue" width="100%"> <td><img src="img/logo.png" /></td> </tr> </thead> <tbody> <tr> <td> <table width="100%" cellspacing="0" class="main"> <!--主体部分整体表格--> <tr> <td width="12%" class="left"> <!--左侧--> <p>商品管理</p> <br /> <p>评价管理</p> <br /> <p>咨询管理</p> <br /> <br /> <br /> <br /> <p><b>全部订单</b></p> <br /> <p>已完成订单</p> <br /> <p>待处理订单</p> <br /> <p>今日物流</p> <br /> <br /> <br /> <br /> <p>月考核</p> <br /> <p>季度考核</p> <br /> <p>年度考核</p> <br /> </td> <td width="88%" class="right"> <!--右侧--> <table width="100%" class="rone" cellspacing="0"> <!--全部订单--> <tr height="50px"> <td> 全部订单</td> </tr> </table> <table width="100%" cellspacing="0" class="rtwo"> <!--查询时间--> <tr height="50px"> <td> 查询:<input type="date" name="date" /> 至 <input type="date" name="date" /></td> </tr> </table> <table width="100%" class="rthree" cellspacing="0"> <!--订单列表--> <tr border="3px solid gray"> <td colspan="2" height="50px" align="center">宝贝信息</td> <!--<td></td>--> <td>订单数量</td> <td>单价</td> <td>买家</td> <td>下单时间</td> <td>实付款</td> <td>订单操作</td> </tr> <tr> <td><img width="55.7px" height="54px" 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 width="55.7px" height="54px" 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 width="55.7px" height="54px" 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 width="55.7px" height="54px" 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> <td><img width="55.7px" height="54px" 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 width="55.7px" height="54px" 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 width="55.7px" height="54px" 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 width="55.7px" height="54px" 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 width="55.7px" height="54px" 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 width="55.7px" height="54px" 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 width="55.7px" height="54px" 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 width="55.7px" height="54px" 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> </table> </td> </tr> </table> </td> </tr> </tbody> <tfoot> <!-- 给tr标签添加100%显示 --> <tr width="100%"> <!-- 设置文本居中 --> <td bgcolor="#4682B4" align="center" height="80px"> <p>2019-9-21 ©imooc.com</p> </td> </tr> </tfoot> </table> </body> </html>
代码中有注释,可以自己测试一下哦。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>第三次项目作业</title>
<style>
*{padding: 0;margin: 0;font-size: 13px;font-family: "黑体";}
.rone,.rtwo{border-bottom: 3.5px solid lightgray;}
.rthree td{border-bottom: 2.5px solid lightgray;border-right: 2.5px solid lightgray;text-align: center;}
.left{border: 2.5px solid lightgray;padding-left: 10px;padding-bottom: 460px;}
.right{border: 2px solid lightgray;}
table tfoot{height: 60px;background-color: steelblue;display: block;}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" width="100%">
<!--thead-->
<tr>
<td>
<thead>
<tr height="60px" bgcolor="steelblue" width="100%">
<td><img src="img/logo.png" /></td>
</tr>
</thead>
</td>
</tr>
<tr>
<!--tbody-->
<tr>
<td>
<tbody>
<table width="100%" cellspacing="0" class="main"><!--主体部分整体表格-->
<tr>
<td width="12%" class="left"> <!--左侧-->
<p>商品管理</p>
<br />
<p>评价管理</p>
<br />
<p>咨询管理</p>
<br />
<br />
<br />
<br />
<p><b>全部订单</b></p>
<br />
<p>已完成订单</p>
<br />
<p>待处理订单</p>
<br />
<p>今日物流</p>
<br />
<br />
<br />
<br />
<p>月考核</p>
<br />
<p>季度考核</p>
<br />
<p>年度考核</p>
<br />
</td>
<td width="88%" class="right"> <!--右侧-->
<table width="100%" class="rone" cellspacing="0"> <!--全部订单-->
<tr height="50px">
<td> 全部订单</td>
</tr>
</table>
<table width="100%" cellspacing="0" class="rtwo"> <!--查询时间-->
<tr height="50px">
<td> 查询:<input type="date" name="date" /> 至 <input type="date" name="date" /></td>
</tr>
</table>
<table width="100%" class="rthree" cellspacing="0"> <!--订单列表-->
<tr border="3px solid gray">
<td colspan="2" height="50px" align="center">宝贝信息</td>
<!--<td></td>-->
<td>订单数量</td>
<td>单价</td>
<td>买家</td>
<td>下单时间</td>
<td>实付款</td>
<td>订单操作</td>
</tr>
<tr>
<td ><img width="55.7px" height="54px" 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 width="55.7px" height="54px" 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 width="55.7px" height="54px" 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 width="55.7px" height="54px" 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>
<td><img width="55.7px" height="54px" 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 width="55.7px" height="54px" 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 width="55.7px" height="54px" 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 width="55.7px" height="54px" 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 width="55.7px" height="54px" 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 width="55.7px" height="54px" 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 width="55.7px" height="54px" 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 width="55.7px" height="54px" 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>
</table>
</td>
</tr>
</table>
</tbody>
</td>
</tr>
<!--tfoot-->
<tr>
<td>
<tfoot>
<tr>
<td width="100%" bgcolor="#4682B4" height="80px"><p>2019-9-21 ©imooc.com</p></td>
</tr>
</tfoot>
</td>
</tr>
</table>
</body>
</html>
<tfoot>
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星