老师,请帮我看下,为什么我设置了width100%无效

老师,请帮我看下,为什么我设置了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 &copy;imooc.com

</td>

</tr>

</tfoot>

</table>

</body>


</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

3回答
6hEd 2020-08-22 03:15:50

把整個表寬度為100%,

tbody左寬度是12%

右寬度是88%

thead寬度不用設定,

信我.


好帮手慕言 2020-08-12 11:55:34

同学你好,代码具有灵活性,作业提供的只是一个思路,同学也可以使用其他方式,能够实现效果即可

祝学习愉快~

好帮手慕言 2020-08-12 11:00:56

同学你好,因为tr标签不支持宽度样式,建议:可以把tr td标签都设置为块元素。如下:

http://img1.sycdn.imooc.com//climg/5f3355a909e13a8c03200138.jpg

主体左侧内容设置固定定位,脱离文档流,会覆盖右侧内容。建议:去掉固定定位,使用浮动让元素在一行显示

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

  • 提问者 raymondJ #1
    但是如果都设置为block,那用table的意义在哪里?本来我就觉得奇怪,html5的作业为什么考验的是table标签。
    2020-08-12 11:05:27
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师