表格左侧设置出问题
来源：3-2 项目作业
无根鸟飞呀飞
2019-06-27 15:56:24
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <table class="all" border="1"> <thead> <tr> <td><img src="img/logo.png" alt="logo"></td> </tr> </thead> <!-- 主体内容 --> <tbody> <tr> <td> <table class="main"> <tr> <!-- 左侧区域 --> <td class="main-left-td"> <table class="main-left" border="1"> <tr class="left-one" > <!-- 左侧商品管理模块 --> <td> <p> 商品管理</p> <p> 评价管理</p> <p> 咨询管理</p> </td> </tr> <!-- 左侧全部订单模块 --> <tr class="left-two"> <td> <p><span> 全部订单</span></p> <p> 已完成订单</p> <p> 待处理订单</p> <p> 今日物流</p> </td> </tr> <!-- 左侧月考核模块 --> <tr class="left-three"> <td> <p> 月考核</p> <p> 季度考核</p> <p> 年度考核</p> </td> </tr> </table> </td> <!-- 右侧区域 --> <td class="right-main-td"> <!-- 右侧大表格 --> <table class="right-main" border="1"> <tr><td colspan="8"> 全部订单</td></tr> </table> <!-- 日期查询 --> <table class="right-main-search" border="1"> <tr> <td colspan="8"> 查询：<input type="data">至<input type="date"> </td> </tr> </table> <!-- 订单列表 --> <table class="right-main-list" border="1"> <tr> <td colspan="2">宝贝信息</td> <td>订单数量</td> <td>单价</td> <td>买家</td> <td>下单时间</td> <td>实付款</td> <td>订单操作</td> </tr> <tr> <td><img src="img/txue.png"></td> <td>2019新款个性男女潮牌imooc慕春之行文化衫</td> <td>2</td> <td>120</td> <td>小明</td> <td>2019-06-27 21：19</td> <td>240</td> <td>已发货</td> </tr> <tr> <td><img src="img/xie.jpg"></td> <td>2019新款个性男女潮牌imooc慕春之行文化衫</td> <td>2</td> <td>120</td> <td>小明</td> <td>2019-06-27 21：19</td> <td>240</td> <td>已发货</td> </tr> <tr> <td><img src="img/txue.png"></td> <td>2019新款个性男女潮牌imooc慕春之行文化衫</td> <td>2</td> <td>120</td> <td>小明</td> <td>2019-06-27 21：19</td> <td>240</td> <td>已发货</td> </tr> <tr> <td><img src="img/xie.jpg"></td> <td>2019新款个性男女潮牌imooc慕春之行文化衫</td> <td>2</td> <td>120</td> <td>小明</td> <td>2019-06-27 21：19</td> <td>240</td> <td>已发货</td> </tr> <tr> <td><img src="img/txue.png"></td> <td>2019新款个性男女潮牌imooc慕春之行文化衫</td> <td>2</td> <td>120</td> <td>小明</td> <td>2019-06-27 21：19</td> <td>240</td> <td>已发货</td> </tr> <tr> <td><img src="img/xie.jpg"></td> <td>2019新款个性男女潮牌imooc慕春之行文化衫</td> <td>2</td> <td>120</td> <td>小明</td> <td>2019-06-27 21：19</td> <td>240</td> <td>已发货</td> </tr> <tr> <td><img src="img/txue.png"></td> <td>2019新款个性男女潮牌imooc慕春之行文化衫</td> <td>2</td> <td>120</td> <td>小明</td> <td>2019-06-27 21：19</td> <td>240</td> <td>已发货</td> </tr> <tr> <td><img src="img/xie.jpg"></td> <td>2019新款个性男女潮牌imooc慕春之行文化衫</td> <td>2</td> <td>120</td> <td>小明</td> <td>2019-06-27 21：19</td> <td>240</td> <td>已发货</td> </tr> <tr> <td><img src="img/txue.png"></td> <td>2019新款个性男女潮牌imooc慕春之行文化衫</td> <td>2</td> <td>120</td> <td>小明</td> <td>2019-06-27 21：19</td> <td>240</td> <td>已发货</td> </tr> <tr> <td><img src="img/xie.jpg"></td> <td>2019新款个性男女潮牌imooc慕春之行文化衫</td> <td>2</td> <td>120</td> <td>小明</td> <td>2019-06-27 21：19</td> <td>240</td> <td>已发货</td> </tr> <tr> <td><img src="img/txue.png"></td> <td>2019新款个性男女潮牌imooc慕春之行文化衫</td> <td>2</td> <td>120</td> <td>小明</td> <td>2019-06-27 21：19</td> <td>240</td> <td>已发货</td> </tr> <tr> <td><img src="img/xie.jpg"></td> <td>2019新款个性男女潮牌imooc慕春之行文化衫</td> <td>2</td> <td>120</td> <td>小明</td> <td>2019-06-27 21：19</td> <td>240</td> <td>已发货</td> </tr> </table> </td> </tr> </table> </td> </tr> </tbody> <tfoot> <tr> <td>2019-06-27 @imooc.com</td> </tr> </tfoot> </table> </body> </html>
*{
margin: 0;
padding: 0;border-color: #ccc;
}
.all{
width: 100%;
}
table{ border-collapse: collapse;}
/*thead*/
thead{
height: 60px;
width: 100%;
background: #169BD5;
}
thead img{
vertical-align: middle;
}
/*tbody*/
tbody,.main{
width: 100%;
}
/*tbody-左侧*/
.main .main-left-td{
width: 12%;
}
.main-left-td{position: relative;}
/*.left-one{position: absolute;
left: 0px;
top: 0px;
}
*/
.main-left{width: 100%;}
.main-left p{
margin: 10px 5px;
}
.main-left span{font-weight: bold;}
/*tbody右侧*/
.right-main-td{width: 88%;}
.right-main,.right-main-search,.right-main-list{width: 100%;}
.right-main,.right-main-search{
height: 50px;
}
.right-main-list img{height: 54px;}
.right-main-list{text-align: center; vertical-align: middle;}
/*tfoot*/
tfoot{height: 60px;
width: 100%;
background: #169BD5;
text-align: center;
}表格左侧目前是垂直居中，无法设置顶部对齐，不起作用。
设置绝对定位可以到顶部，倒是宽度却不是100%了，怎么调都不起作用。
老师有什么方法么
写回答
1回答
-
好帮手慕慕子
2019-06-27
同学你好， 因为单元格td的display属性本来是table-cell。但是同学给单元格设置绝对定位之后，单元格的display属性改变为block； 失去表格的特有属性。所以设置宽度百分百后不起作用。
建议： 不需要设置绝对定位， 可以通过给左侧单元格vertical-align: top;属性，实现顶部对齐的效果， 示例：
看出来同学是有基础的， 目前阶段就可以使用CSS实现效果很棒哦， 目前我们可以不用深究CSS样式，后面我们学习CSS的时候，老师会有详细的讲解哦
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
0
相似问题