tbody滚动条占位导致与thead表头错位

最新推荐文章于 2024-06-17 16:30:49 发布

weixin_30412167

最新推荐文章于 2024-06-17 16:30:49 发布

阅读量910

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/wj19940520/p/8669858.html

版权

当tbody内容高度超过外部容器时，滚动条出现导致表头错位。文章探讨了两种解决方案：1) 使用min-width和max-width，但不适用于IE；2) 将表头和内容分别用div包裹，通过JavaScript动态调整表头div的padding-right来适应滚动条。

摘要由CSDN通过智能技术生成

tbody出滚动条导致表头错位，上网上搜了一下，发现全是答非所问，能隐藏滚动条，还用问？？
我当前作出的效果是当tbody内容在正常情况下显示时，不显示滚动条，当内容区域高度超过外部容器时，滚动条自动显示。外部容器的overflow设为auto，不要设为scroll,因为设为scroll时，滚动条始终出现。
下面是错位情况图：

方案一：

看到网上有说给td宽度加min-width和max-width,谷歌上确实有用，但是ie上不行，所以略过....

不考虑兼容的朋友可以用，毕竟用起来方便简单，地址 https://blog.csdn.net/AliceWu_1111/article/details/78964080

方案二：

考虑将表头用div>table>thead>th结构，将内容用div>table>tbody>td结构，外层仍是table结构，以图上结构为例：

<style>

.intblayout{ table-layout: fixed;width: 100%;padding: 0;}
.nonetr{height:0px;line-height:0;margin:0;padding:0;}

</style>
<table class="indexList f_left" width="49%" border="0" style="margin-left: 1%;">
                <tr class="addtable_tit">
                    <td colspan="4" style="text-align: left; border-top: none;">
                        <p class="icon_left">
                            <span class="icon24 icon_todo">&l