设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › table 加个横向的 滚动条，这个要怎么加
返回列表 发新帖
查看: 974|回复: 1

[已解决]table 加个横向的 滚动条，这个要怎么加

[复制链接]
makliu
发表于 2022-12-9 15:20:41 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
千辛万苦在网上找了一段代码， table 固定行列的 。
发现它没有横向滚动条。。。。

万能鱼友们， 求给这段代码 在table上 加个横向的滚动条。。。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        table {
            border-collapse: collapse;
        }

        .sticky-table {
            overflow: auto;
            height: 100%; /* 设置固定高度 */
            width: 100%;
            position: absolute
        }

        .sticky-table td, .sticky-table th {
            /* 设置td,th宽度高度 */
            border: 1px solid #c7d8ee;
            width: 150px;
            min-width: 150px;
            height: 30px;
            padding: 5px;
        }

        .sticky-table th {
            position: sticky;
            top: 0; /* 首行永远固定在头部  */
            background-color: #eaf4ff; /*设置表头背景色*/
        }

        .sticky-table td:first-child, .sticky-table th:first-child {
            position: sticky;
            left: 0; /* 首列永远固定在左侧 */
            z-index: 1;
            background-color: #eaf4ff;
        }

        .sticky-table th:first-child {
            z-index: 2; /*表头的首列要在上面*/
        }

        .sticky-table th > div {
            width: 100%;
            white-space: normal;
            word-wrap: break-word;
            word-break: break-all;
        }

        /*.sticky-table table {
            table-layout: fixed;
        }*/

    </style>
</head>
<body style="padding: 0px;margin: 0px;">
<div class="sticky-table">
    <table>
        <thead>
        <tr>
            <th></th>
            <th colspan="8">个人素养</th>
            <th colspan="4">社群素养</th>
            <th colspan="8">职业素养</th>
        </tr>
        <tr>
            <th></th>
            <th colspan="2">身体素质</th>
            <th colspan="2">艺术修养</th>
            <th colspan="2">心理素质</th>
            <th colspan="2">道德修为</th>
            <th colspan="2">爱国与责任意识</th>
            <th colspan="2">法律与环保意识</th>
            <th colspan="6">基本职业素质</th>
            <th colspan="2">企业文化与创新精神</th>
        </tr>
        <tr>
            <th>姓名</th>
            <th>
                <div>基本身体情况</div>
            </th>
            <th>
                <div>体育特长能力</div>
            </th>
            <th>
                <div>艺术审美</div>
            </th>
            <th>
                <div>爱好特长</div>
            </th>
            <th>
                <div>心理健康</div>
            </th>
            <th>
                <div>自我调节</div>
            </th>
            <th>
                <div>自信自强、诚实守信</div>
            </th>
            <th>
                <div>文明素养、个人行为规范</div>
            </th>
            <th>
                <div>爱国意识</div>
            </th>
            <th>
                <div>责任心及服务意识</div>
            </th>
            <th>
                <div>法律意识</div>
            </th>
            <th>
                <div>环保意识</div>
            </th>
            <th>
                <div>语言表达能力及口语特长</div>
            </th>
            <th>
                <div>自我管理，自我激励</div>
            </th>
            <th>
                <div>发展规划能力</div>
            </th>
            <th>
                <div>信息技术能力</div>
            </th>
            <th>
                <div>沟通能力</div>
            </th>
            <th>
                <div>团队合作能力</div>
            </th>
            <th>
                <div>企业文化学习</div>
            </th>
            <th>
                <div>创新能力、解决问题能力</div>
            </th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
        </tr>
        <tr>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
            <td>优秀</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>
最佳答案
月排行榜 / 总排行榜
洋洋痒
2022-12-10 18:49:42
你这个有横向滚动条的，只不过滚动条在 .sticky-table的最底下，你又设置的.sticky-table的height为100%，所以滚动条跑最下边了
，只需要改动一下就看到了
.sticky-table里的height改成85%
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

洋洋痒
发表于 2022-12-10 18:49:42 | 显示全部楼层    本楼为最佳答案   
你这个有横向滚动条的，只不过滚动条在 .sticky-table的最底下，你又设置的.sticky-table的height为100%，所以滚动条跑最下边了
，只需要改动一下就看到了
.sticky-table里的height改成85%
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-11-22 11:24

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表