为什么thead 和tfoot 不能实现居中效果？
来源：3-2 项目作业
weixin_慕粉8323943
2019-08-19 18:23:01
HTML:
<table>
<thead>
<tr>
<td>
<img src="img/logo.png" alt="">
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<table class="body">
<tr>
<td width="12%" class="left"></td>
<td width="88%" class="right">
<table class="orders"></table>
<table class="search"></table>
<table class="list">
tr*13>td*8
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td >
2019-9-21 ©imooc.com
</td>
</tr>
</tfoot>
</table>
CSS:
thead{
position: fixed;
background: rgb(100, 200, 152);
width: 100%;
color: white;
text-align: center;
top: 0;
}
thead tr td {
/* position: relative; */
width: 100%;
padding: 10px 10px;
height: 60px;
}
tfoot tr{
position: fixed;
background: rgb(100, 200, 152);
height: 60px;
line-height: 60px;
width: 100%;
color: white;
bottom: 0;
}
tfoot tr td{
width: 100%;
margin:0 auto;
}
3回答
-
好帮手慕慕子
2019-08-22
同学你好， 先辈元素设置的display属性， 后面的元素不会继承
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
0 -
好帮手慕慕子
2019-08-20
同学你好， 可以td设置display:block；属性，然后添加text-align：center;实现内容居中。 示例：
页脚内容水平居中
页头实现图片居中，可以参考下图样式
综上， 其实可以对比老师第一次给同学提出的修改建议， 给页脚和页头设置固定定位，改变了表格的本身自带的特性， 想要实现内容居中， 需要调整更多的样式，一般不推荐这么做， 实际应用中也很少这样做哦，所以还是推荐这里不给页头页脚设置固定定位实现效果
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
0h019-08-22 -
好帮手慕慕子
2019-08-19
同学你好， 因为给thead和tfoot设置了固定定位， 影响了表格原来特有的属性，导致没有实现水平居中
其实这里的头部和页脚不需要设置固定定位， 这样只需要给thead和tfoot添加text-align：center;属性即可实现内容水平居中。参考修改：
效果图：
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
0h019-08-20
相似问题