表格问题?
来源:3-2 项目作业
慕标5156652
2020-06-14 02:27:01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cao</title>
<!-- <link rel="stylesheet"type="text/css" href="css/css.css"> -->
<style>
.container{width: 100%;}
.container .thead {
height: 60px;
background-color: #169bd5;}
.img{
width: 10px;
height:20px;}
.container .tbody .main tr {
width: 12%
}
.container .tbody .main tr .left{
width: 12%
}
.container .tbody .main tr .right{
width: 88%
}
</style>
</head>
<body>
<table class="container">
<thead class="thead">
<tr>
<td>
<img class="logo " src="img/logo.png" alt="">
</td>
</tr>
</thead>
<tbody class="tbody">
<table class="main">
<tr >
<td class="left">
<p>商品管理</p>
<p>评价管理</p>
<p>咨询管理</p>
<p>已完成订单</p>
<p>待处理订单</p>
<p>今日物流</p>
<p>月考核</p>
<p>季度考核</p>
<p>年度考核</p>
</td>
<td class="right">
<table class="main-header">
<tr>
<td>全部订单</td>
</tr>
</table>
<table class="soushuo">
<tr>
<td>查询</td>
</tr>
</table>
<table class="content">
<tr>
<td colspan="2">宝贝信息</td>
<td>订单数量</td>
<td>单价</td>
<td>买家</td>
<td>下单时间</td>
<td>实付款</td>
<td>订单</td>
</tr>
<tr>
<td><img class="img" src="img/xie.jpg" alt=""></td>
<td>2019新款个性男女潮牌imooc幕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-12-21 21:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="img/xie.jpg" alt="" class="img"></td>
<td>2019新款个性男女潮牌imooc幕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-12-21 21:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="img/xie.jpg" alt="" class="img"></td>
<td>2019新款个性男女潮牌imooc幕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-12-21 21:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="img/xie.jpg" alt="" class="img"></td>
<td>2019新款个性男女潮牌imooc幕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-12-21 21:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="img/xie.jpg" alt="" class="img"></td>
<td>2019新款个性男女潮牌imooc幕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-12-21 21:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="img/xie.jpg" alt="" class="img"></td>
<td>2019新款个性男女潮牌imooc幕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-12-21 21:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="img/xie.jpg" alt="" class="img"></td>
<td>2019新款个性男女潮牌imooc幕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-12-21 21:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="img/xie.jpg" alt="" class="img"></td>
<td>2019新款个性男女潮牌imooc幕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-12-21 21:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="img/xie.jpg" alt="" class="img"></td>
<td>2019新款个性男女潮牌imooc幕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-12-21 21:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="img/xie.jpg" alt="" class="img"></td>
<td>2019新款个性男女潮牌imooc幕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-12-21 21:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="img/xie.jpg" alt="" class="img"></td>
<td>2019新款个性男女潮牌imooc幕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-12-21 21:54</td>
<td>240</td>
<td>待付款</td>
</tr>
<tr>
<td><img src="img/xie.jpg" alt="" class="img"></td>
<td>2019新款个性男女潮牌imooc幕春之行文化衫</td>
<td>2</td>
<td>120</td>
<td>小明</td>
<td>2019-12-21 21:54</td>
<td>240</td>
<td>待付款</td>
</tr>
</table></td>
</tr>
</table>
</tbody>
</table>
</body>
</html>
为什么我style里面设置的width的12% 和88%不起作用?
1回答
好帮手慕星星
2020-06-14
同学你好,左侧和右侧的样式没有设置上,是代码嵌套有问题,看一下浏览器中的解析
是两个table。这是因为tbody中嵌套table的时候没有放在td单元格中,所以分离出来了。参考修改
嵌套的表格需要设置宽度为100%
自己再测试下,祝学习愉快!
相似问题