请教个问题 为什么表格左右加一起没办法铺满页面宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3-2 项目作业</title>
<style type="text/css">
/* All tag */
* { font-family: Arial; font-size: 14px; margin: 0; padding: 0; border: none; }
a { text-decoration: none; }
ul { list-style: none; }
.total{
width:100%;
}
/*表头部分*/
.thead{
width:100%;
height:60px;
background-color: #169bd5;
}
/*主体部分*/
tbody .container{
width:100%;
border:1px #eaeaea solid;
}
/*主体左侧部分*/
tbody .left{
width: 12%;
border:2px solid pink;
}
tbody .left p{
margin-top: 15px;
margin-left:10px;
font-size:16px;
}
tbody .left h1{
font-size:17px;
margin-left:10px;
}
/*主体右侧部分*/
tbody .right{
width:88%;
border: 2px solid red;
}
</style>
</head>
<body>
<table class="total">
<!-- 表头部分 -->
<thead>
<tr>
<td class="thead"><img src="img/logo.png"></td>
</tr>
</thead>
<!-- 主体部分 -->
<tbody>
<table class="container">
<tr>
<!-- 主体左侧 -->
<td class="left">
<p>商品管理</p>
<p>评价管理</p>
<p>咨询管理</p><br><br>
<h1>全部订单</h1>
<p>已完成订单</p>
<p>待处理订单</p>
<p>今日物流</p><br><br>
<p>月考核</p>
<p>季度考核</p>
<p>年度考核</p>
</td>
<!-- 主体右侧 -->
<td class="right">
<table class="r1">
<tr>
<td>全部订单</td>
</tr>
</td>
</table>
</table>
</tr>
</tbody>
<!-- 尾部部分 -->
<tfoot>
</tfoot>
</table>
</body>
</html>
主体部分的左边是12%，右边是88%，加一块没办法铺满页面的宽…问题出在哪里没找到，辛苦老师看一下。
正在回答
在css中设置宽度为100%可以，但是你的结构层，是在tbody中又嵌套了table，一般情况下tbody中是直接写tr、td内容的，所以在浏览器中其实不识别，在浏览器中，tbody到了container table里面：
所以你在css中写的 tbody .container是找不到对应的container的，实际的情况你可以可以这么嵌套，你可以直接写.container { }就可以起到作用了。
此外，html结构中还有问题，tbody中有多处结束标签错乱，你自己好好的对照一下：
对照完之后可以参考：
如果帮助到了你，欢迎采纳！
祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星