表格问题?

来源: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%不起作用?

http://img.mukewang.com/climg/5ee51a5e09c3ab6603320120.jpg

http://img.mukewang.com/climg/5ee51a5e09fb463602900132.jpg


写回答

1回答

好帮手慕星星

2020-06-14

同学你好,左侧和右侧的样式没有设置上,是代码嵌套有问题,看一下浏览器中的解析

http://img.mukewang.com/climg/5ee59bcf09a8784c04590065.jpg

是两个table。这是因为tbody中嵌套table的时候没有放在td单元格中,所以分离出来了。参考修改

http://img.mukewang.com/climg/5ee59c9d091607a206560277.jpg

嵌套的表格需要设置宽度为100%

http://img.mukewang.com/climg/5ee59cb809166af307440371.jpg

自己再测试下,祝学习愉快!

0

0 学习 · 40143 问题

查看课程