table出现滚动条对齐的问题

最新推荐文章于 2023-08-28 15:47:30 发布
最新推荐文章于 2023-08-28 15:47:30 发布
阅读量3.7k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38558683/article/details/81700775
版权

话不多说，直接上代码，主要是实时改变table的宽度

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="jquery-2.1.1.js"></script>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .sq{
            width: 70%;
            height: 100px;
            overflow: auto;
            margin: auto;
        }
        .tt{
            margin: auto;
            border-collapse: collapse;
            border-spacing: 0;
        }
        .tt thead tr{
            z-index:2;
        }
        .tt tbody{
            
        }
        table{
            border-collapse: collapse;
            border-spacing: 0;
        }
        .sh{
            width: 70%;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="sh">
    <table border="1px" class="ts">
        <thead>
            <tr>
                <th>第一列</th>
                <th>第二列</th>
            </tr>
        </thead>
    </table>
</div>
<div class="sq">
    <table width="100%" class="tt" border="1px" height="50px">
        <tbody>
            <tr>
                <td width="50%">123</td>
                <td width="50%">123</td>
            </tr>
            <tr>
                <td>123</td>
                <td>123</td>
            </tr>
            <tr>
                <td>123</td>
                <td>123</td>
            </tr>
            <tr>
                <td>123</td>
                <td>123</td>
            </tr>
                        <tr>
                <td>123</td>
                <td>123</td>
            </tr>
                        <tr>
                <td>123</td>
                <td>123</td>
            </tr>
                        <tr>
                <td>123</td>
                <td>123</td>
            </tr>
                        <tr>
                <td>123</td>
                <td>123</td>
            </tr>
                        <tr>
                <td>123</td>
                <td>123</td>
            </tr>
                        <tr>
                <td>123</td>
                <td>123</td>
            </tr>
                        <tr>
                <td>123</td>
                <td>123</td>
            </tr>
        </tbody>
    </table>
</div>

<script type="text/javascript">

//这是关键，改变表格的宽度
    function t(){
        var sw=$(".sq")[0].offsetWidth-$(".sq")[0].scrollWidth;
        var tsw=$(".sh")[0].offsetWidth;
        var s=tsw-sw;
        $(".ts").css({"width":s})
    }
    setInterval("t()",50);
</script>
</body>
</html>

ZERO·HERO
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
table内容出现滚动条和表头对齐问题
05-09
为了解决"table内容出现滚动条和表头对齐问题"，我们需要深入理解表格布局、CSS样式控制以及可能涉及到的JavaScript或jQuery解决方案。 首先，让我们了解一下HTML表格的基本结构。一个HTML表格由`<table>`元素开始...
table滚动上下对齐
12-31
静态页面
element-ui table表格滚动条拉到最右侧 表头与内容不能对齐
最新发布
weixin_43422861的博客
08-28 1523
element-ui table
table 表头固定，内容滚动时表头与内容不对齐的解决办法
i_belive_my_love的博客
02-16 3126
##**场景：**在vue项目中使用原生table时，添加内容滚动表头固定后发现内容和表头不对齐的情况 ##解决办法： <div class="mytable"> <table border="1" cellspacing="0" style="border-color: #aaaaff;"> <!--border="1" cellspacing="0"--> <thead style="background-co
Html滑动条使表格线不对齐,显示滚动条后，table 表头与内容不对齐，JS脚本控制...
weixin_29518761的博客
06-07 923
/*设置高度、滚动条*///其他DIV 高度var tbheight =document.getElementById("div_top").scrollHeight +document.getElementById("div_tools_bar").scrollHeight+document.getElementById("div_tools_bar2").scrollHeight+docume...
css 和表头对齐 表格_bootstrap table列和表头对不齐的解决方法
weixin_35327421的博客
02-23 1078
我们在使用bootstraptable做表格展示时，有时需要固定表格的高度当数据超出高度会出现滚动条，这时有可能出现表头列和数据列对不齐。出现这个问题的原因是数据列出现了滚动条占了宽度，造成表头 数据 的div宽度不一样。通过Chrome浏览器 f12，看到样式为 .fixed-table-header .fixed-table-body .fixed-table-footer的3个div容器宽...
antd表格固定后出现，对不齐的现象，解决方案
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
07-30 9357
问题描述： antd表格固定后出现对不齐的现象，比如设置了fixed。如下图 这个是官方的bug，在后续版本修复了 在3.26.1里修复了。 antd表格固定列对不齐现象https://github.com/ant-design/ant-design/issues/19952 解决方案： 1.升级版本（方案一） 但对于老项目，升级成本高或者暂时无法升级的就只能用样式强行控制了 2.样式控制（方案二） (1).github 上antd issues 19952给了一个方案 ...
解决layui数据表格table的横向滚动条显示问题
12-11
ps：这个问题fly社区给出的解释是：table 列宽自适应出现横向滚动条的几率一般是比较小的，主要原因是 table 的渲染有时会在浏览器纵向滚动条出现之前渲染完毕，这时 table 容器会被强制减少滚动条宽度的差（一般是 ...
table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法
08-29
table表格，让thead固定，tbody有滚动条， 关键是都对齐的纯css写法关键是都对齐的纯css写法
BootStrap Table 设置height表头与内容无法对齐的问题
08-31
在某些场景下，我们可能需要设定表格的高度以适应页面布局，但这样做可能导致表头和内容的对齐出现问题。表头通常被固定在顶部以便滚动查看长表格，而内容部分则随着数据的加载和滚动进行更新。当高度被固定后，由于...
table设置表格有滚动条对齐问题
qq_36688928的博客
10-17 2635
1.转自：https://www.cnblogs.com/mengfangui/p/7027393.html table 设置表格有滚动条。 少说多做，代码中有注释： 1 &lt;!DOCTYPE HTML&gt; 2 &lt;html&gt; 3 4 &lt;head&gt; 5 &lt;meta http-equiv="Content-Type"...
table上下对齐滚动条设置
zhangwenhuad的博客
12-31 761
说明 手写的table，设置滚动条时，只设置滚动效果，上下表格对齐，滚动条样式调整 表格对齐关键点：table-layout w3school详细说明 代码 <!DOCTYPE> <html> <head> <title>table</title> <style> table tbody { display:block; height:195px; overflow-y:scroll; }
table表头固定，内容滚动条，table滚动条对齐
qq_37167086的博客
03-06 877
<template> <table> <thead> <tr> <th v-for="(item,index) in 10" :key="index">表头</th> </tr> </thead> <tbody> <tr v-f...
table下tbody滚动条与thead对齐的方法
qq_41908953的博客
07-11 1205
代码 核心代码： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <style> table tbody { display:block; //corecode height:200px; overflow-y:scroll; } ...
java table每列对齐_table下tbody滚动条与thead对齐的方法且每一列可以不均等
weixin_39607937的博客
02-13 290
1 前言table下tbody滚动条与thead对齐的方法，开始在tbody的td和thead的tr>td，对每一个Item加入百分比，结果是没对齐。也尝试了用bootstrap的col-md-1等来对齐，也是对不齐。然后只能网上查找答案了，就只需看用CSS来控制样式即可达到目的2 代码核心代码：table tbody {display:block; //core codeheight:20...
CSS设置table下tbody滚动条与thead对齐的方法
weixin_30767921的博客
08-06 251
<style>table tbody {display:block;height:195px;overflow-y:scroll;} table thead, tbody tr {display:table;width:100%;table-layout:fixed;} table thead {width: calc( 100% - 1em )}table thead th{ b...
el-table动态显示列高度塌陷问题以及非固定列底部滚动条无法对齐的问题
karlif的博客
07-28 1855
el-table动态显示列高度塌陷问题以及非固定列底部滚动条无法对齐的问题
elementUI table fixed设置后，表格无法对齐，滚动条被覆盖（亲测有用）
xiaoxin_su的博客
12-15 5208
elementUI table fixed设置后，表格无法对齐，滚动条被覆盖（亲测有用）
table下tbody滚动条与thead对齐的方法且每一列可以不均等
weixin_30399821的博客
12-21 718
1 前言 table下tbody滚动条与thead对齐的方法，开始在tbody的td和thead的tr>td，对每一个Item加入百分比，结果是没对齐。也尝试了用bootstrap的col-md-1等来对齐，也是对不齐。然后只能网上查找答案了，就只需看用CSS来控制样式即可达到目的 2 代码 核心代码： <style> table tbody { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值