javascript - 这个表格滚动条怎么弄？-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

javascript - 这个表格滚动条怎么弄？

PHP中文网 2017-04-11 13:26:18

[JavaScript讨论组]

569

如图所示，我想右边添加滚动条，不过添加完之后由于滚动条的存在上下格式不能对齐，求解如何设置？
ps:只给下面内容加滚动条怎么弄好，就是固定表头，表头不能出现滚动条，我是上面表头和下面内容分两个table写的(因为tbody不能设置高度。。)

PHP中文网

认证0级讲师

全部回复(7)

ringa_lee2017-04-11 13:28:18 7楼

我理解的意思是你想做一个无滚动条的滚动，，不知道对不对。
这是我之前写的关于p的，我想table也差不太多吧
https://github.com/jackPanyj/...

这是demo地址，上面链接中也有给出

http://codepen.io/jackpan/pen...

赞 +0

添加回复

伊谢尔伦2017-04-11 13:28:18 6楼

加一个padding；挤开算了。反正你这个布局的时候就么有弄好

赞 +0

添加回复

天蓬老师2017-04-11 13:28:18 5楼

给个参考思路：把表头的那个table多加一列<td></td>，这一列的宽度设置成刚好和下面table滚动条的宽度一样，这样下面的内容列就跟上面表头列对应了

赞 +0

添加回复

阿神2017-04-11 13:28:18 4楼

表头可以用一个p模拟table的效果，下面的table用一个p包起来，滚动条设置给p，给p设置一个右padding应该可以实现你的这个效果吧

赞 +0

添加回复

大家讲道理2017-04-11 13:28:18 3楼

上面的table 设置 overflow-y:scroll;

赞 +0

添加回复

高洛峰2017-04-11 13:28:18 2楼

滚动条的宽度是可以通过代码计算出来的，加油

赞 +0

添加回复

PHP中文网2017-04-11 13:28:18 1楼

<html>
<header></header>
<style type="text/css" media="screen">
    body{
        margin: 0;
    }
    table{
        display: table;
        border: 1px solid gray;
        color: gray;
        font-size: .8rem;
        /* border-collapse: collapse; */
        padding-top: 3rem;
        position: relative;
    }
    th{
        background-color: gray;
        color: white;
        line-height: 3rem;
    }
    td{
        text-align: center;
        line-height: 2rem;
    }
    tr.fixed{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }
</style>
<body>
    <table cellpadding="0" cellspacing="0">
        <tr class="fixed">
            <th>123</th>
            <th>我理解的意思是你想做一个无滚动条的滚动，，不知道对不对。</th>
            <th>123</th>
            <th>我理解的意思是你想做一个无滚动条的滚动，，不知道对不对。</th>
        </tr>
        <tr>
            <td>我理解的意思是你想做一个无滚动条的滚动，，不知道对不对。</td>
            <td>123</td>
            <td>我理解的意思是你想做一个无滚动条的滚动，，不知道对不对。</td>
            <td>123</td>
        </tr>
        <tr>
            <td>我理解的意思是你想做一个无滚动条的滚动，，不知道对不对。</td>
            <td>123</td>
            <td>我理解的意思是你想做一个无滚动条的滚动，，不知道对不对。</td>
            <td>123</td>
        </tr>
        <tr>
            <td>我理解的意思是你想做一个无滚动条的滚动，，不知道对不对。</td>
            <td>123</td>
            <td>我理解的意思是你想做一个无滚动条的滚动，，不知道对不对。</td>
            <td>123</td>
        </tr>
        <tr>
            <td>我理解的意思是你想做一个无滚动条的滚动，，不知道对不对。</td>
            <td>123</td>
            <td>我理解的意思是你想做一个无滚动条的滚动，，不知道对不对。</td>
            <td>123</td>
        </tr>
        <tr>
            <td>我理解的意思是你想做一个无滚动条的滚动，，不知道对不对。</td>
            <td>123</td>
            <td>我理解的意思是你想做一个无滚动条的滚动，，不知道对不对。</td>
            <td>123</td>
        </tr>
        <tr>
            <td>我理解的意思是你想做一个无滚动条的滚动，，不知道对不对。</td>
            <td>123</td>
            <td>我理解的意思是你想做一个无滚动条的滚动，，不知道对不对。</td>
            <td>123</td>
        </tr>
        <tr>
            <td>我理解的意思是你想做一个无滚动条的滚动，，不知道对不对。</td>
            <td>123</td>
            <td>我理解的意思是你想做一个无滚动条的滚动，，不知道对不对。</td>
            <td>123</td>
        </tr>
        <tr>
            <td>我理解的意思是你想做一个无滚动条的滚动，，不知道对不对。</td>
            <td>123</td>
            <td>我理解的意思是你想做一个无滚动条的滚动，，不知道对不对。</td>
            <td>123</td>
        </tr>
    </table>
</body>
</html>

每天三遍说爱我！

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>