老师,请帮我看下,为什么我设置了width100%无效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="css/index.css"> -->
<style>
*{
margin:0;
padding:0;
font-size: 16px;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
.clear{
clear:both;
}
table,tr,td{
width: 100%;
}
body > table > thead,body > table > tfoot{
width: 100%;
height: 60px;
position: fixed;
background-color: #169bd5;
}
body > table > thead{
text-align: left;
top: 0;
left: 0;
}
body > table > tfoot{
text-align: center;
line-height: 60px;
bottom: 0;
left: 0;
}
body>table>tfoot tr{
display: block;
}
body>table>tfoot td{
margin: 0 auto;
display: block;
}
body > table tbody{
margin: 60px auto;
display: block;
border: 1px solid gray;
border-collapse: collapse;
width: 100%;
}
.left{
width: 12%;
position: fixed;
top:60px;
left: 0;
height: 900px;
}
.right{
width: 88%;
}
</style>
</head>
<body>
<table>
<!-- 头部 -->
<thead>
<tr>
<td>
<img src="img/logo.png" alt="">
</td>
</tr>
</thead>
<!-- 主体 -->
<tbody>
<tr>
<td>
<table>
<tr>
<!-- 左侧菜单 -->
<td class="left">
<p>商品管理</p>
<p>评价管理</p>
<p>咨询管理</p>
<br>
<p class="active">全部订单</p>
<p>已完成订单</p>
<p>待处理订单</p>
<p>今日物流</p>
<br>
<p>月考核</p>
<p>季度考核</p>
<p>年度考核</p>
</td>
<!-- 右侧列表 -->
<td class="right">
<!-- 标题 -->
<table>
<tr>
<td>
<span>全部订单</span>
</td>
</tr>
</table>
<!-- 查询栏 -->
<table>
<tr>
<td>
<form oninput="">
<span>查询</span>
<input type="date" name="startFrom">
<span>至</span>
<input type="date" name="endTo">
</form>
</td>
</tr>
</table>
<!-- 详情列表 13*8 -->
<table>
<tr>
<td>宝贝信息</td>
<td>订单数量</td>
<td>单价</td>
<td>买家</td>
<td>下单时间</td>
<td>实付款</td>
<td>订单操作</td>
</tr>
<tr>
<td><img src="img/txue.png" alt=""></td>
<td>2019年新款潮流imooc时尚T恤</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-12-5 21:45</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="img/txue.png" alt=""></td>
<td>2019年新款潮流imooc时尚T恤</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-12-5 21:45</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="img/txue.png" alt=""></td>
<td>2019年新款潮流imooc时尚T恤</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-12-5 21:45</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="img/txue.png" alt=""></td>
<td>2019年新款潮流imooc时尚T恤</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-12-5 21:45</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="img/txue.png" alt=""></td>
<td>2019年新款潮流imooc时尚T恤</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-12-5 21:45</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="img/txue.png" alt=""></td>
<td>2019年新款潮流imooc时尚T恤</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-12-5 21:45</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="img/txue.png" alt=""></td>
<td>2019年新款潮流imooc时尚T恤</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-12-5 21:45</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="img/txue.png" alt=""></td>
<td>2019年新款潮流imooc时尚T恤</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-12-5 21:45</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="img/txue.png" alt=""></td>
<td>2019年新款潮流imooc时尚T恤</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-12-5 21:45</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="img/txue.png" alt=""></td>
<td>2019年新款潮流imooc时尚T恤</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-12-5 21:45</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="img/txue.png" alt=""></td>
<td>2019年新款潮流imooc时尚T恤</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-12-5 21:45</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="img/txue.png" alt=""></td>
<td>2019年新款潮流imooc时尚T恤</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-12-5 21:45</td>
<td>240</td>
<td>待付款</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<!-- 底部 -->
<tfoot>
<tr>
<td>
2019-12-1 ©imooc.com
</td>
</tr>
</tfoot>
</table>
</body>
</html>
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星