出现滚动条的表格对齐方法

最新推荐文章于 2023-08-18 10:48:47 发布
最新推荐文章于 2023-08-18 10:48:47 发布
阅读量149 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/web-alibaba/p/4529675.html
版权 
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script type="text/javascript" src= 'jquery.js'></script>
<script type="text/javascript">
    $(function(){
        table_align('.topT','.bottomT',6)
    })



function table_align(table1,table2,tdnums){
    for(var i=1;i<tdnums;i++){
        var tdclass = ".td_"+i;
        var thwidth=$(table1).find(tdclass).width();
        $(table2).find(tdclass).width(thwidth);        
    }
}
</script>
<style type="text/css">
    .topT{
        margin-bottom: 0px;
    }
    .bottom{
        height: 100px;
        overflow-y:auto; 
    }
</style>
</head>
<body>
    <div class='top'>
        <table class='table table-bordered topT'>
            <tr>
                <td class='td_1'>aaaaaaaaaa</td>
                <td class='td_2'>aaaaaaaaaa</td>
                <td class='td_3'>aaaaaaaaaa</td>
                <td class='td_4'>aaaaaaaaaa</td>
                <td class='td_5'>aaaaaaaaaa</td>
                <td class='td_6'>aaaaaaaaaa</td>
            </tr>
        </table>
    </div>
    <div class='bottom'>
        <table class='table table-bordered bottomT'>
            <tr>
                <td class='td_1'>aaaaaaaaaa</td>
                <td class='td_2'>aaaaaaaaaa</td>
                <td class='td_3'>aaaaaaaaaa</td>
                <td class='td_4'>aaaaaaaaaa</td>
                <td class='td_5'>aaaaaaaaaa</td>
                <td class='td_6'>aaaaaaaaaa</td>
            </tr>
            <tr>
                <td  class='td_1'>aaaaaaaaaa</td>
                <td  class='td_2'>aaaaaaaaaa</td>
                <td  class='td_3'>aaaaaaaaaa</td>
                <td  class='td_4'>aaaaaaaaaa</td>
                <td  class='td_5'>aaaaaaaaaa</td>
                <td  class='td_6'>aaaaaaaaaa</td>
            </tr>
            <tr>
                <td  class='td_1'>aaaaaaaaaa</td>
                <td  class='td_2'>aaaaaaaaaa</td>
                <td  class='td_3'>aaaaaaaaaa</td>
                <td  class='td_4'>aaaaaaaaaa</td>
                <td  class='td_5'>aaaaaaaaaa</td>
                <td  class='td_6'>aaaaaaaaaa</td>
            </tr>
            <tr>
                <td  class='td_1'>aaaaaaaaaa</td>
                <td  class='td_2'>aaaaaaaaaa</td>
                <td  class='td_3'>aaaaaaaaaa</td>
                <td  class='td_4'>aaaaaaaaaa</td>
                <td  class='td_5'>aaaaaaaaaa</td>
                <td  class='td_6'>aaaaaaaaaa</td>
            </tr>
            <tr>
                <td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td>
            </tr>
            <tr>
                <td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td>
            </tr>
            <tr>
                <td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td>
                <td>aaaaaaaaaa</td>
            </tr>
        </table>
    </div>
</body>
</html>

想法就是取得除了最后一个td之前的td宽度 ，然后赋予相对应的td

最后一个因为表格是用了bootstrap的自适应表格宽度 自适应，所以不用修改

 

 

 

转载于:https://www.cnblogs.com/web-alibaba/p/4529675.html

weixin_30339969
关注
table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法
09-30
table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法
table内容出现滚动条和表头对齐问题
05-09
table内容出现滚动条和表头对齐
table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。
Embrace924的博客
08-29 554
案例下载地址 https://download.csdn.net/download/embrace924/10632898 &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;title&
table出现滚动条对齐的问题
无限ZERO的博客
08-15 3735
话不多说，直接上代码，主要是实时改变table的宽度   &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;title&gt;Document&lt;/title&gt;     &lt;script type=&q
解决layui数据表格table的横向滚动条显示问题
12-11
ps：这个问题fly社区给出的解释是：table 列宽自适应出现横向滚动条的几率一般是比较小的，主要原因是 table 的渲染有时会在浏览器纵向滚动条出现之前渲染完毕，这时 table 容器会被强制减少滚动条宽度的差（一般是 ...
易语言表格不显示滚动条的代码
08-26
在易语言编程中，有时我们需要控制表格控件的显示效果，比如隐藏滚动条，以达到更美观或适应特定界面设计的需求。这篇分享的代码主要展示了如何实现易语言表格不显示滚动条的功能。以下是对这段代码的详细解释： ...
table上下对齐滚动条设置
zhangwenhuad的博客
12-31 777
说明 手写的table，设置滚动条时，只设置滚动效果，上下表格对齐，滚动条样式调整 表格对齐关键点：table-layout w3school详细说明 代码 <!DOCTYPE> <html> <head> <title>table</title> <style> table tbody { display:block; height:195px; overflow-y:scroll; }
在jqgrid的编辑窗体中 如果 字段名和文本框 不能对齐 解决办法
buhuan123的专栏
05-26 1872
<br />首先找到，css下的 ui.jqgrid.css ,<br />然后 找到 其中的<br />.ui-jqdialog-content .CaptionTD {<br /> text-align: left;<br /> vertical-align: top;<br /> border: 0px none;<br /> padding: 4px;<br /> white-space: normal;<br /> padding-top: 16px;<br />}<br />而 padding-
elementUI table fixed设置后，表格无法对齐，滚动条被覆盖.完美解决方案
最新发布
AKA多个A的博客
08-18 2712
给css加上这几条就可以完美解决 第一个calc-10px如果不够可以自己调。想必大家给elementUI的表格设置固定列后都会出现这种情况。
layui表格固定列覆盖滚动条导致错位
热门推荐
q1424966670的博客
08-04 1万+
加一行代码即可 done:function(res){ $(".layui-table-fixed .layui-table-body").height($(".layui-table-box>.layui-table-body")[0].clientHeight); }
Html滑动条使表格线不对齐,显示滚动条后，table 表头与内容不对齐，JS脚本控制...
weixin_29518761的博客
06-07 943
/*设置高度、滚动条*///其他DIV 高度var tbheight =document.getElementById("div_top").scrollHeight +document.getElementById("div_tools_bar").scrollHeight+document.getElementById("div_tools_bar2").scrollHeight+docume...
table设置表格有滚动条对齐问题
qq_36688928的博客
10-17 2656
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"...
MFC滚动条自动对齐：一个grid选中一行另一个grid也选中相同行并且内容和滚动条自动对齐
C++ 爱好者 make_it_simple888
05-15 968
核心思想是利用gridCtrl的滚动条消息响应。当我需要让一个gridCtrl的滚动条连同其gridCtrl的内容一起自动滚动到另一个新的合适的位置的时候，我给这个gridCtrl发一个消息SendMessage()核心代码如下：m_gridRight.SetScrollPos(SB_VERT, iPos, TRUE);//滚动条滚动 //内容滚动 m_gridRight.SendMessage...
table 表头固定，内容滚动时表头与内容不对齐的解决办法
i_belive_my_love的博客
02-16 3217
##**场景：**在vue项目中使用原生table时，添加内容滚动表头固定后发现内容和表头不对齐的情况 ##解决办法： <div class="mytable"> <table border="1" cellspacing="0" style="border-color: #aaaaff;"> <!--border="1" cellspacing="0"--> <thead style="background-co
关于antd table 表头与表格不对齐问题
halations的博客
09-29 4027
出现这个问题一般是设置了scroll属性 解决方法：给每个表头设置width，然后最后一个可以不设置，antd会自适应最后一个。 { title:'任务类型', dataIndex:'type', key:'type', width:90, }, 如果还没解决怎么办？ 可能出现的问题是因为render的值长度大于了外面设置的width 比如 { ...
自定义滚动条样式生成工具
提供的代码示例展示了如何使用CSS来设置文本区域的滚动条样式，包括字体大小、家庭、对齐方式以及边距等属性。" 滚动条在网页设计中常常被忽视，但它对整体界面的视觉效果和交互体验起着重要作用。这个滚动条代码...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值