欢迎访问 如意编程网！
TAG聚合

如意编程网

当前位置： 首页 > 前端技术 > HTML >内容正文

HTML

html table显示滚动条

发布时间：2022/11/16 HTML 11 老码农
如意编程网 收集整理的这篇文章主要介绍了 html table显示滚动条 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

实现思路

通过限制height后显示滚动条；将thead部分拆出单独排版即可；thead部分采用了boostrap排版，tbody部分采用了宽度百分比排版

具体实现

层级结构：
+div
++标题部分

+div
++div
++table
注意:
两层div包裹table

<style>
    .list-task-plan-light{
            background-color: #898989;
        }
    .list-task-plan-title span{
        border-left: 2px solid black;
        line-height: 1;

    }
    .list-task-plan-title span:first-child{
        border-left: 0;
    }
    .list-task-plan-body td{
        font-size: 10px;
        text-align: center;
    }
/* 主要样式 */
    .plan-table-div{
        position:relative;
    }
    .plan-table-table{
        height:100px;
        overflow:auto;
    }
</style>



<div>
    //thead部分
    <div>
        <span>序号</span>
        <span>xxx</span>
        <span>xxx</span>
        <span>xxx</span>
    </div>

    <span>
        <a href="#">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456l-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>
                <path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/>
            </svg>
        </a>
    </span>
</div>
<div>
    <div>
        <table>
            <tbody>
                <tr>
                    <td style="width: 20%">1</td>
                    <td style="width: 40%">113°47''23.953E</td>
                    <td style="width: 20%">113°47''23.953E</td>
                    <td style="width: 20%">8.0Kn</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>113°47''23.953E</td>
                    <td>113°47''23.953E</td>
                    <td>8.0Kn</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>113°47''23.953E</td>
                    <td>113°47''23.953E</td>
                    <td>8.0Kn</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>113°47''23.953E</td>
                    <td>113°47''23.953E</td>
                    <td>8.0Kn</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>113°47''23.953E</td>
                    <td>113°47''23.953E</td>
                    <td>8.0Kn</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>113°47''23.953E</td>
                    <td>113°47''23.953E</td>
                    <td>8.0Kn</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>113°47''23.953E</td>
                    <td>113°47''23.953E</td>
                    <td>8.0Kn</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>113°47''23.953E</td>
                    <td>113°47''23.953E</td>
                    <td>8.0Kn</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>113°47''23.953E</td>
                    <td>113°47''23.953E</td>
                    <td>8.0Kn</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>113°47''23.953E</td>
                    <td>113°47''23.953E</td>
                    <td>8.0Kn</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>113°47''23.953E</td>
                    <td>113°47''23.953E</td>
                    <td>8.0Kn</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>113°47''23.953E</td>
                    <td>113°47''23.953E</td>
                    <td>8.0Kn</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>113°47''23.953E</td>
                    <td>113°47''23.953E</td>
                    <td>8.0Kn</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>113°47''23.953E</td>
                    <td>113°47''23.953E</td>
                    <td>8.0Kn</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>113°47''23.953E</td>
                    <td>113°47''23.953E</td>
                    <td>8.0Kn</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>113°47''23.953E</td>
                    <td>113°47''23.953E</td>
                    <td>8.0Kn</td>
                </tr>

                <tr>
                    <td>1</td>
                    <td>113°47''23.953E</td>
                    <td>113°47''23.953E</td>
                    <td>8.0Kn</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

最终效果图：

html table显示滚动条

参考链接：

http://jsfiddle.net/TweNm/
这个布局并没有将标题部分单独拆出，而是采用定位的方式向上移动

总结

以上是如意编程网为你收集整理的html table显示滚动条的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得如意编程网网站内容还不错，欢迎将如意编程网推荐给好友。