精华内容
下载资源
问答
  • table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。table...
  • 固定table的thead表头

    2019-11-11 22:33:33
    固定table的thead表头
  • jq实现页面滚动thead固定在顶部,仅tbody滚动 监听页面滚动 $(window).scroll(function () 获取窗口滚动高度 $(window).scrollTop() 总体思路:用窗口滚动高度减去元素距页面顶部高度,小于零时thead正常显示,...

    jq实现页面滚动thead固定在顶部,仅tbody滚动

    1. 监听页面滚动 $(window).scroll(function ()
    2. 获取窗口滚动高度 $(window).scrollTop()

    总体思路:用窗口滚动高度减去元素距页面顶部高度,小于零时thead正常显示,大于零时给thead添加transform样式

    展示效果

    • 显示顶部元素时
      请添加图片描述
    • 滚动至顶部元素不显示后:

    请添加图片描述

    代码

    jquery:

    $(window).scroll(function () {
            var y = $(window).scrollTop() - 438
            console.log($(window).scrollTop())
            if (y >= 0) {
                $('thead').css("transform", "translateY(" + y + "px)")
            } else {
                $('thead').css("transform", "translateY(0px)")
            }
        });
    

    html:

    <thead>
    	   <tr>
    	      <th class="text-center">thead1</th>
    	      <th class="text-center">thead2</th>
    	      <th class="text-center">thead3</th>
    	      <th class="text-center">thead4</th>
    	    </tr>
    	    <tr>
    	      <th class="text-center">thead5</th>
    	      <th class="text-center">thead6</th>
    	      <th class="text-center">thead7</th>
    	      <th class="text-center">thead8</th>
    	    </tr>
    </thead>
    
    展开全文
  • table thead , tbody tr { display : table ; width : 100 % ; table - layout : fixed ; } table thead { width : calc ( 100 % - 1 em ) } table thead th { background : #ccc ; } < /...

    直接上代码

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>转载自·威易网CSS教程</title>
    <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{ background:#ccc;}
    </style>
    </head>
    
    <body>
    <table width="80%" border="1">
    <thead>
    <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>出生年月</th>
    <th>手机号码</th>
    <th>单位</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>张三</td>
    <td>18</td>
    <td>1990-9-9</td>
    <td>13682299090</td>
    <td>阿里巴巴</td>
    </tr>
    <tr>
    <td>张三封</td>
    <td>18</td>
    <td>1990-9-9</td>
    <td>13682299090</td>
    <td>阿里巴巴与四十大盗</td>
    </tr>
    <tr>
    <td>张小三</td>
    <td>18</td>
    <td>1990-9-9</td>
    <td>13682299090</td>
    <td>腾讯科技</td>
    </tr>
    <tr>
    <td>张三</td>
    <td>18</td>
    <td>1990-9-9</td>
    <td>13682299090</td>
    <td>浏阳河就业</td>
    </tr>
    <tr>
    <td>张三疯子</td>
    <td>18</td>
    <td>1990-9-9</td>
    <td>13682299090</td>
    <td>阿里巴巴</td>
    </tr>
    <tr>
    <td>张三</td>
    <td>18</td>
    <td>1990-9-9</td>
    <td>13682299090</td>
    <td>阿里巴巴</td>
    </tr>
    <tr>
    <td>张大三</td>
    <td>18</td>
    <td>1990-9-9</td>
    <td>13682299090</td>
    <td>阿里巴巴</td>
    </tr>
    <tr>
    <td>张三五</td>
    <td>18</td>
    <td>1990-9-9</td>
    <td>13682299090</td>
    <td>阿里巴巴</td>
    </tr>
    <tr>
    <td>张刘三</td>
    <td>18</td>
    <td>1990-9-9</td>
    <td>13682299090</td>
    <td>阿里巴巴</td>
    </tr>
    <tr>
    <td>张三</td>
    <td>18</td>
    <td>1990-9-9</td>
    <td>13682299090</td>
    <td>阿里巴巴</td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>
    

    转载自: https://www.cnblogs.com/webSong/p/6242444.html

    另外两种解决方案
    https://segmentfault.com/a/1190000008590577
    使用粘带定位: https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

    展开全文
  • 二就是表格内部tbody滚动,thead固定 对应第二种方式:有两种办法,其一table固定高,加滚动条,thead随着表格滚动translateY(...) window.onload = function(){ $('#table-cont').on('scroll', functi...

    1、表头固定问题处理方式:

    一般可以clone出thead,然后fixed固定于顶部;二就是表格内部tbody滚动,thead固定

    对应第二种方式:有两种办法,其一table固定高,加滚动条,thead随着表格滚动translateY(...)

    window.onload = function(){
            $('#table-cont').on('scroll', function scrollHandle (e){
                var scrollTop = this.scrollTop;
                $('#table-cont thead').css("transform",'translateY(' + scrollTop + 'px)');
            });
        }

    其二如下所示,设置表格样式

    #divGrid table{
         border-collapse:collapse !important;
        border-spacing:1px;
    }
    #divGrid table tbody {
        display:block;
        max-height:450px;
        width:inherit;
        overflow: hidden;
        overflow-y:auto;
    }
    #divGrid table thead,#divGrid tbody tr {
        display:table;
        width:inherit;
        table-layout:fixed;
    }
    #divGrid table thead th,#divGrid table tbody tr td{
        border: 1px solid #E5E5E5;
        border-top: none;
    }

    效果图如下

    展开全文
  • "></div></th></tr></thead></table></div><div class="fixed-table-body"><table id="exampleTableLargeColumns" data-show-columns="true" data-height="400" data-mobile-responsive="true" class="table table-...

    <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.5rel="stylesheet">

    <link href="css/font-awesome.min.css?v=4.4.0rel="stylesheet">

    <link href="css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">

    <link href="css/animate.min.css" rel="stylesheet">

    <link href="css/style.min.css?v=4.0.0" rel="stylesheet">

    <div class="fixed-table-container" style="height: 341px; padding-bottom: 36px;"><div class="fixed-table-header" style="margin-right: 6px;"><table class="table table-hover" style="width: 2828px;"><thead><tr><th style="" data-field="字段0" tabindex="0"><div class="th-inner ">单元0</div><div class="fht-cell" style="width: 50px;"></div></th><th style="" data-field="字段1" tabindex="0"><div class="th-inner ">单元1</div><div class="fht-cell" style="width: 50px;"></div></th><th style="" data-field="字段2" tabindex="0"><div class="th-inner ">单元2</div><div class="fht-cell" style="width: 50px;"></div></th><th style="" data-field="字段3" tabindex="0"><div class="th-inner ">单元3</div><div class="fht-cell" style="width: 50px;"></div></th><th style="" data-field="字段4" tabindex="0"><div class="th-inner ">单元4</div><div class="fht-cell" style="width: 50px;"></div></th><th style="" data-field="字段5" tabindex="0"><div class="th-inner ">单元5</div><div class="fht-cell" style="width: 50px;"></div></th><th style="" data-field="字段6" tabindex="0"><div class="th-inner ">单元6</div><div class="fht-cell" style="width: 50px;"></div></th><th style="" data-field="字段7" tabindex="0"><div class="th-inner ">单元7</div><div class="fht-cell" style="width: 50px;"></div></th><th style="" data-field="字段8" tabindex="0"><div class="th-inner ">单元8</div><div class="fht-cell" style="width: 50px;"></div></th><th style="" data-field="字段9" tabindex="0"><div class="th-inner ">单元9</div><div class="fht-cell" style="width: 50px;"></div></th><th style="" data-field="字段10" tabindex="0"><div class="th-inner ">单元10</div><div class="fht-cell" style="width: 57px;"></div></th><th style="" data-field="字段11" tabindex="0"><div class="th-inner ">单元11</div><div class="fht-cell" style="width: 56px;"></div></th><th style="" data-field="字段12" tabindex="0"><div class="th-inner ">单元12</div><div class="fht-cell" style="width: 57px;"></div></th><th style="" data-field="字段13" tabindex="0"><div class="th-inner ">单元13</div><div class="fht-cell" style="width: 57px;"></div></th><th style="" data-field="字段14" tabindex="0"><div class="th-inner ">单元14</div><div class="fht-cell" style="width: 57px;"></div></th><th style="" data-field="字段15" tabindex="0"><div class="th-inner ">单元15</div><div class="fht-cell" style="width: 57px;"></div></th><th style="" data-field="字段16" tabindex="0"><div class="th-inner ">单元16</div><div class="fht-cell" style="width: 57px;"></div></th><th style="" data-field="字段17" tabindex="0"><div class="th-inner ">单元17</div><div class="fht-cell" style="width: 57px;"></div></th><th style="" data-field="字段18" tabindex="0"><div class="th-inner ">单元18</div><div class="fht-cell" style="width: 57px;"></div></th><th style="" data-field="字段19" tabindex="0"><div class="th-inner ">单元19</div><div class="fht-cell" style="width: 57px;"></div></th><th style="" data-field="字段20" tabindex="0"><div class="th-inner ">单元20</div><div class="fht-cell" style="width: 57px;"></div></th><th style="" data-field="字段21" tabindex="0"><div class="th-inner ">单元21</div><div class="fht-cell" style="width: 57px;"></div></th><th style="" data-field="字段22" tabindex="0"><div class="th-inner ">单元22</div><div class="fht-cell" style="width: 57px;"></div></th><th style="" data-field="字段23" tabindex="0"><div class="th-inner ">单元23</div><div class="fht-cell" style="width: 57px;"></div></th><th style="" data-field="字段24" tabindex="0"><div class="th-inner ">单元24</div><div class="fht-cell" style="width: 57px;"></div></th><th style="" data-field="字段25" tabindex="0"><div class="th-inner ">单元25</div><div class="fht-cell" style="width: 57px;"></div></th><th style="" data-field="字段26" tabindex="0"><div class="th-inner ">单元26</div><div class="fht-cell" style="width: 57px;"></div></th><th style="" data-field="字段27" tabindex="0"><div class="th-inner ">单元27</div><div class="fht-cell" style="width: 57px;"></div></th><th style="" data-field="字段28" tabindex="0"><div class="th-inner ">单元28</div><div class="fht-cell" style="width: 57px;"></div></th><th style="" data-field="字段29" tabindex="0"><div class="th-inner ">单元29</div><div class="fht-cell" style="width: 57px;"></div></th><th style="" data-field="字段30" tabindex="0"><div class="th-inner ">单元30</div><div class="fht-cell" style="width: 57px;"></div></th><th style="" data-field="字段31" tabindex="0"><div class="th-inner ">单元31</div><div class="fht-cell" style="width: 57px;"></div></th><th style="" data-field="字段32" tabindex="0"><div class="th-inner ">单元32</div><div class="fht-cell" style="width: 57px;"></div></th><th style="" data-field="字段33" tabindex="0"><div class="th-inner ">单元33</div><div class="fht-cell" style="width: 57px;"></div></th><th style="" data-field="字段34" tabindex="0"><div class="th-inner ">单元34</div><div class="fht-cell" style="width: 57px;"></div></th><th style="" data-field="字段35" tabindex="0"><div class="th-inner ">单元35</div><div class="fht-cell" style="width: 57px;"></div></th><th style="" data-field="字段36" tabindex="0"><div class="th-inner ">单元36</div><div class="fht-cell" style="width: 57px;"></div></th><th style="" data-field="字段37" tabindex="0"><div class="th-inner ">单元37</div><div class="fht-cell" style="width: 57px;"></div></th><th style="" data-field="字段38" tabindex="0"><div class="th-inner ">单元38</div><div class="fht-cell" style="width: 57px;"></div></th><th style="" data-field="字段39" tabindex="0"><div class="th-inner ">单元39</div><div class="fht-cell" style="width: 57px;"></div></th><th style="" data-field="字段40" tabindex="0"><div class="th-inner ">单元40</div><div class="fht-cell" style="width: 57px;"></div></th><th style="" data-field="字段41" tabindex="0"><div class="th-inner ">单元41</div><div class="fht-cell" style="width: 57px;"></div></th><th style="" data-field="字段42" tabindex="0"><div class="th-inner ">单元42</div><div class="fht-cell" style="width: 57px;"></div></th><th style="" data-field="字段43" tabindex="0"><div class="th-inner ">单元43</div><div class="fht-cell" style="width: 57px;"></div></th><th style="" data-field="字段44" tabindex="0"><div class="th-inner ">单元44</div><div class="fht-cell" style="width: 57px;"></div></th><th style="" data-field="字段45" tabindex="0"><div class="th-inner ">单元45</div><div class="fht-cell" style="width: 57px;"></div></th><th style="" data-field="字段46" tabindex="0"><div class="th-inner ">单元46</div><div class="fht-cell" style="width: 57px;"></div></th><th style="" data-field="字段47" tabindex="0"><div class="th-inner ">单元47</div><div class="fht-cell" style="width: 57px;"></div></th><th style="" data-field="字段48" tabindex="0"><div class="th-inner ">单元48</div><div class="fht-cell" style="width: 57px;"></div></th><th style="" data-field="字段49" tabindex="0"><div class="th-inner ">单元49</div><div class="fht-cell" style="width: 57px;"></div></th></tr></thead></table></div><div class="fixed-table-body"><table id="exampleTableLargeColumns" data-show-columns="true" data-height="400" data-mobile-responsive="true" class="table table-hover" style="margin-top: -36px;"><thead><tr><th style="" data-field="字段0" tabindex="0"><div class="th-inner ">单元0</div><div class="fht-cell"></div></th><th style="" data-field="字段1" tabindex="0"><div class="th-inner ">单元1</div><div class="fht-cell"></div></th><th style="" data-field="字段2" tabindex="0"><div class="th-inner ">单元2</div><div class="fht-cell"></div></th><th style="" data-field="字段3" tabindex="0"><div class="th-inner ">单元3</div><div class="fht-cell"></div></th><th style="" data-field="字段4" tabindex="0"><div class="th-inner ">单元4</div><div class="fht-cell"></div></th><th style="" data-field="字段5" tabindex="0"><div class="th-inner ">单元5</div><div class="fht-cell"></div></th><th style="" data-field="字段6" tabindex="0"><div class="th-inner ">单元6</div><div class="fht-cell"></div></th><th style="" data-field="字段7" tabindex="0"><div class="th-inner ">单元7</div><div class="fht-cell"></div></th><th style="" data-field="字段8" tabindex="0"><div class="th-inner ">单元8</div><div class="fht-cell"></div></th><th style="" data-field="字段9" tabindex="0"><div class="th-inner ">单元9</div><div class="fht-cell"></div></th><th style="" data-field="字段10" tabindex="0"><div class="th-inner ">单元10</div><div class="fht-cell"></div></th><th style="" data-field="字段11" tabindex="0"><div class="th-inner ">单元11</div><div class="fht-cell"></div></th><th style="" data-field="字段12" tabindex="0"><div class="th-inner ">单元12</div><div class="fht-cell"></div></th><th style="" data-field="字段13" tabindex="0"><div class="th-inner ">单元13</div><div class="fht-cell"></div></th><th style="" data-field="字段14" tabindex="0"><div class="th-inner ">单元14</div><div class="fht-cell"></div></th><th style="" data-field="字段15" tabindex="0"><div class="th-inner ">单元15</div><div class="fht-cell"></div></th><th style="" data-field="字段16" tabindex="0"><div class="th-inner ">单元16</div><div class="fht-cell"></div></th><th style="" data-field="字段17" tabindex="0"><div class="th-inner ">单元17</div><div class="fht-cell"></div></th><th style="" data-field="字段18" tabindex="0"><div class="th-inner ">单元18</div><div class="fht-cell"></div></th><th style="" data-field="字段19" tabindex="0"><div class="th-inner ">单元19</div><div class="fht-cell"></div></th><th style="" data-field="字段20" tabindex="0"><div class="th-inner ">单元20</div><div class="fht-cell"></div></th><th style="" data-field="字段21" tabindex="0"><div class="th-inner ">单元21</div><div class="fht-cell"></div></th><th style="" data-field="字段22" tabindex="0"><div class="th-inner ">单元22</div><div class="fht-cell"></div></th><th style="" data-field="字段23" tabindex="0"><div class="th-inner ">单元23</div><div class="fht-cell"></div></th><th style="" data-field="字段24" tabindex="0"><div class="th-inner ">单元24</div><div class="fht-cell"></div></th><th style="" data-field="字段25" tabindex="0"><div class="th-inner ">单元25</div><div class="fht-cell"></div></th><th style="" data-field="字段26" tabindex="0"><div class="th-inner ">单元26</div><div class="fht-cell"></div></th><th style="" data-field="字段27" tabindex="0"><div class="th-inner ">单元27</div><div class="fht-cell"></div></th><th style="" data-field="字段28" tabindex="0"><div class="th-inner ">单元28</div><div class="fht-cell"></div></th><th style="" data-field="字段29" tabindex="0"><div class="th-inner ">单元29</div><div class="fht-cell"></div></th><th style="" data-field="字段30" tabindex="0"><div class="th-inner ">单元30</div><div class="fht-cell"></div></th><th style="" data-field="字段31" tabindex="0"><div class="th-inner ">单元31</div><div class="fht-cell"></div></th><th style="" data-field="字段32" tabindex="0"><div class="th-inner ">单元32</div><div class="fht-cell"></div></th><th style="" data-field="字段33" tabindex="0"><div class="th-inner ">单元33</div><div class="fht-cell"></div></th><th style="" data-field="字段34" tabindex="0"><div class="th-inner ">单元34</div><div class="fht-cell"></div></th><th style="" data-field="字段35" tabindex="0"><div class="th-inner ">单元35</div><div class="fht-cell"></div></th><th style="" data-field="字段36" tabindex="0"><div class="th-inner ">单元36</div><div class="fht-cell"></div></th><th style="" data-field="字段37" tabindex="0"><div class="th-inner ">单元37</div><div class="fht-cell"></div></th><th style="" data-field="字段38" tabindex="0"><div class="th-inner ">单元38</div><div class="fht-cell"></div></th><th style="" data-field="字段39" tabindex="0"><div class="th-inner ">单元39</div><div class="fht-cell"></div></th><th style="" data-field="字段40" tabindex="0"><div class="th-inner ">单元40</div><div class="fht-cell"></div></th><th style="" data-field="字段41" tabindex="0"><div class="th-inner ">单元41</div><div class="fht-cell"></div></th><th style="" data-field="字段42" tabindex="0"><div class="th-inner ">单元42</div><div class="fht-cell"></div></th><th style="" data-field="字段43" tabindex="0"><div class="th-inner ">单元43</div><div class="fht-cell"></div></th><th style="" data-field="字段44" tabindex="0"><div class="th-inner ">单元44</div><div class="fht-cell"></div></th><th style="" data-field="字段45" tabindex="0"><div class="th-inner ">单元45</div><div class="fht-cell"></div></th><th style="" data-field="字段46" tabindex="0"><div class="th-inner ">单元46</div><div class="fht-cell"></div></th><th style="" data-field="字段47" tabindex="0"><div class="th-inner ">单元47</div><div class="fht-cell"></div></th><th style="" data-field="字段48" tabindex="0"><div class="th-inner ">单元48</div><div class="fht-cell"></div></th><th style="" data-field="字段49" tabindex="0"><div class="th-inner ">单元49</div><div class="fht-cell"></div></th></tr></thead><tbody><tr data-index="0"><td style="">Row-0-0</td><td style="">Row-0-1</td><td style="">Row-0-2</td><td style="">Row-0-3</td><td style="">Row-0-4</td><td style="">Row-0-5</td><td style="">Row-0-6</td><td style="">Row-0-7</td><td style="">Row-0-8</td><td style="">Row-0-9</td><td style="">Row-0-10</td><td style="">Row-0-11</td><td style="">Row-0-12</td><td style="">Row-0-13</td><td style="">Row-0-14</td><td style="">Row-0-15</td><td style="">Row-0-16</td><td style="">Row-0-17</td><td style="">Row-0-18</td><td style="">Row-0-19</td><td style="">Row-0-20</td><td style="">Row-0-21</td><td style="">Row-0-22</td><td style="">Row-0-23</td><td style="">Row-0-24</td><td style="">Row-0-25</td><td style="">Row-0-26</td><td style="">Row-0-27</td><td style="">Row-0-28</td><td style="">Row-0-29</td><td style="">Row-0-30</td><td style="">Row-0-31</td><td style="">Row-0-32</td><td style="">Row-0-33</td><td style="">Row-0-34</td><td style="">Row-0-35</td><td style="">Row-0-36</td><td style="">Row-0-37</td><td style="">Row-0-38</td><td style="">Row-0-39</td><td style="">Row-0-40</td><td style="">Row-0-41</td><td style="">Row-0-42</td><td style="">Row-0-43</td><td style="">Row-0-44</td><td style="">Row-0-45</td><td style="">Row-0-46</td><td style="">Row-0-47</td><td style="">Row-0-48</td><td style="">Row-0-49</td></tr><tr data-index="1"><td style="">Row-1-0</td><td style="">Row-1-1</td><td style="">Row-1-2</td><td style="">Row-1-3</td><td style="">Row-1-4</td><td style="">Row-1-5</td><td style="">Row-1-6</td><td style="">Row-1-7</td><td style="">Row-1-8</td><td style="">Row-1-9</td><td style="">Row-1-10</td><td style="">Row-1-11</td><td style="">Row-1-12</td><td style="">Row-1-13</td><td style="">Row-1-14</td><td style="">Row-1-15</td><td style="">Row-1-16</td><td style="">Row-1-17</td><td style="">Row-1-18</td><td style="">Row-1-19</td><td style="">Row-1-20</td><td style="">Row-1-21</td><td style="">Row-1-22</td><td style="">Row-1-23</td><td style="">Row-1-24</td><td style="">Row-1-25</td><td style="">Row-1-26</td><td style="">Row-1-27</td><td style="">Row-1-28</td><td style="">Row-1-29</td><td style="">Row-1-30</td><td style="">Row-1-31</td><td style="">Row-1-32</td><td style="">Row-1-33</td><td style="">Row-1-34</td><td style="">Row-1-35</td><td style="">Row-1-36</td><td style="">Row-1-37</td><td style="">Row-1-38</td><td style="">Row-1-39</td><td style="">Row-1-40</td><td style="">Row-1-41</td><td style="">Row-1-42</td><td style="">Row-1-43</td><td style="">Row-1-44</td><td style="">Row-1-45</td><td style="">Row-1-46</td><td style="">Row-1-47</td><td style="">Row-1-48</td><td style="">Row-1-49</td></tr><tr data-index="2"><td style="">Row-2-0</td><td style="">Row-2-1</td><td style="">Row-2-2</td><td style="">Row-2-3</td><td style="">Row-2-4</td><td style="">Row-2-5</td><td style="">Row-2-6</td><td style="">Row-2-7</td><td style="">Row-2-8</td><td style="">Row-2-9</td><td style="">Row-2-10</td><td style="">Row-2-11</td><td style="">Row-2-12</td><td style="">Row-2-13</td><td style="">Row-2-14</td><td style="">Row-2-15</td><td style="">Row-2-16</td><td style="">Row-2-17</td><td style="">Row-2-18</td><td style="">Row-2-19</td><td style="">Row-2-20</td><td style="">Row-2-21</td><td style="">Row-2-22</td><td style="">Row-2-23</td><td style="">Row-2-24</td><td style="">Row-2-25</td><td style="">Row-2-26</td><td style="">Row-2-27</td><td style="">Row-2-28</td><td style="">Row-2-29</td><td style="">Row-2-30</td><td style="">Row-2-31</td><td style="">Row-2-32</td><td style="">Row-2-33</td><td style="">Row-2-34</td><td style="">Row-2-35</td><td style="">Row-2-36</td><td style="">Row-2-37</td><td style="">Row-2-38</td><td style="">Row-2-39</td><td style="">Row-2-40</td><td style="">Row-2-41</td><td style="">Row-2-42</td><td style="">Row-2-43</td><td style="">Row-2-44</td><td style="">Row-2-45</td><td style="">Row-2-46</td><td style="">Row-2-47</td><td style="">Row-2-48</td><td style="">Row-2-49</td></tr><tr data-index="3"><td style="">Row-3-0</td><td style="">Row-3-1</td><td style="">Row-3-2</td><td style="">Row-3-3</td><td style="">Row-3-4</td><td style="">Row-3-5</td><td style="">Row-3-6</td><td style="">Row-3-7</td><td style="">Row-3-8</td><td style="">Row-3-9</td><td style="">Row-3-10</td><td style="">Row-3-11</td><td style="">Row-3-12</td><td style="">Row-3-13</td><td style="">Row-3-14</td><td style="">Row-3-15</td><td style="">Row-3-16</td><td style="">Row-3-17</td><td style="">Row-3-18</td><td style="">Row-3-19</td><td style="">Row-3-20</td><td style="">Row-3-21</td><td style="">Row-3-22</td><td style="">Row-3-23</td><td style="">Row-3-24</td><td style="">Row-3-25</td><td style="">Row-3-26</td><td style="">Row-3-27</td><td style="">Row-3-28</td><td style="">Row-3-29</td><td style="">Row-3-30</td><td style="">Row-3-31</td><td style="">Row-3-32</td><td style="">Row-3-33</td><td style="">Row-3-34</td><td style="">Row-3-35</td><td style="">Row-3-36</td><td style="">Row-3-37</td><td style="">Row-3-38</td><td style="">Row-3-39</td><td style="">Row-3-40</td><td style="">Row-3-41</td><td style="">Row-3-42</td><td style="">Row-3-43</td><td style="">Row-3-44</td><td style="">Row-3-45</td><td style="">Row-3-46</td><td style="">Row-3-47</td><td style="">Row-3-48</td><td style="">Row-3-49</td></tr><tr data-index="4"><td style="">Row-4-0</td><td style="">Row-4-1</td><td style="">Row-4-2</td><td style="">Row-4-3</td><td style="">Row-4-4</td><td style="">Row-4-5</td><td style="">Row-4-6</td><td style="">Row-4-7</td><td style="">Row-4-8</td><td style="">Row-4-9</td><td style="">Row-4-10</td><td style="">Row-4-11</td><td style="">Row-4-12</td><td style="">Row-4-13</td><td style="">Row-4-14</td><td style="">Row-4-15</td><td style="">Row-4-16</td><td style="">Row-4-17</td><td style="">Row-4-18</td><td style="">Row-4-19</td><td style="">Row-4-20</td><td style="">Row-4-21</td><td style="">Row-4-22</td><td style="">Row-4-23</td><td style="">Row-4-24</td><td style="">Row-4-25</td><td style="">Row-4-26</td><td style="">Row-4-27</td><td style="">Row-4-28</td><td style="">Row-4-29</td><td style="">Row-4-30</td><td style="">Row-4-31</td><td style="">Row-4-32</td><td style="">Row-4-33</td><td style="">Row-4-34</td><td style="">Row-4-35</td><td style="">Row-4-36</td><td style="">Row-4-37</td><td style="">Row-4-38</td><td style="">Row-4-39</td><td style="">Row-4-40</td><td style="">Row-4-41</td><td style="">Row-4-42</td><td style="">Row-4-43</td><td style="">Row-4-44</td><td style="">Row-4-45</td><td style="">Row-4-46</td><td style="">Row-4-47</td><td style="">Row-4-48</td><td style="">Row-4-49</td></tr></tbody></table></div></div>

    <script src="js/jquery.min.js?v=2.1.4"></script>

    <script src="js/bootstrap.min.js?v=3.3.5"></script>

    <script src="js/content.min.js?v=1.0.0"></script>

    <script src="js/plugins/bootstrap-table/bootstrap-table.min.js"></script>

    <script src="js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></scrip

    <script src="js/demo/bootstrap-table-demo.min.js"></script>

    最后效果:

     

     

    转载于:https://www.cnblogs.com/xiaozhouyuxiaohou/p/9125541.html

    展开全文
  • Bootstrap表格中,thead固定,tbody有垂直滚动条 转载出处:https://www.cnblogs.com/LindaBlog/p/9203724.html 1、html源码:这里的table是使用的vue写法,实际生成的表格和一个一个写的tr th td无异 <div class...
  • table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。 ** 找了好久才找到一篇可以简单粗暴就能用的,所以拿过来算是收藏了。里面有一个css2里的命令是我没 用过的也是这里面关键的:table-layout:...
  • table表格,thead固定,tbody滚动条

    万次阅读 2018-08-03 14:25:20
    如上图所示 之前 写的样式 不变, 想让 thead 固定 不动, tbody 增加滚动条,在样式中添加如下代码   table tbody { display: block; height: 195px; overflow-y: scroll; } table thead, tbody tr { ...
  • 最近在写后台管理系统,在数据的显示上,table如果整体滚动的话,头部...首先thead设置 thead{ display:table/inline-block; } 然后tbody设置 tbody{ display:inline-block;//或者block height:300px;//设置...
  • 多套一个div,用两个table控制,标题一个table,内容一个table。给内容多套一个div,设置高度后 overflow-y: auto; 如果不多加一层div,而是直接给tbody设置,IE8不支持...
  • table表头thead固定

    2016-05-25 13:31:00
    table thead { background-color : #CCCCCC ; } table tr td { border : 1px solid red ; } style > head > < body > < table id ="mytable" > < thead > < tr > < td > 表头1 td > ...
  • 表格table中thead固定,tbody超出高度出现滚动条,css可进行如下设置 table tbody { display: block; height: 195px; overflow-y: scroll; } table thead, tbody tr { display: table; width: 100%; ...
  • 参考:http://blog.sina.com.cn/s/blog_603fcfae0102xku3.html
  • 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 ) } tabl
  • } </style> </head> <body> <table width="80%" border="1"> <thead> <tr> 姓名</th> 年龄</th> 出生年月</th> 手机号码</th> 单位</th> </tr> </thead> <tbody> <tr> 张三</td> <td>18</td> <td>1990-9-9</td> ...
  • 1、固定顶部 position:fixed;top:0px 2、左右滚动条 OVERFLOW-X: scroll;width:720px; 3、时间内容越出单元格显示 position: relative;bottom:30px; ;charset=UTF-8" language="java" %> content=...
  • 在书写项目的时候,当给tbody加滚动条时由于滚动条会占位,总是出现表格边框不对齐有错位的效果呢,如下图 <thead> 申请日期 订单号
  •  多行多列的表头thead固定 效果图: 多行多列的表头固定 水果 人名 玩具 苹果 香蕉 Jay Lucy Nick 小汽车 娃娃 2个 2个 2个 2个 2个 2个 2个 3个 3个 3个 3个 3个 3个 3个 4个 4个 4个 4个 4个 4个 4个 5个 5个 5个...
  • css部分:table{ display: block; height: 200px;...}table thead, tbodytr{ display:table; width:100%; table-layout:fixed;}table thead{ width: calc( 100% - 1.2em )}html部分:&lt;table class...
  • table thead, tbody tr { display:table; width:100%; table-layout:fixed; } table thead { width: calc( 100% - 1em ) } table thead th{ background:#ccc;} <thead> 姓名 年龄 出生年月 手机号码 单位 </...
  • $(".one-one thead").height($(".one-two thead").height()) //实时获取table 的宽度和th的高度 $(window).resize(function(){ $(".one-one").width($(".one-two").width()) $(".one-one ...
  • thead固定,tbody固定高度滚动

    千次阅读 2019-05-27 15:46:54
    /*tbody滚动,thead固定*/ .hj-table thead,.hj-table tbody { display:block; overflow-y:scroll; } .hj-table tbody{ max-height:400px; } .hj-table thead tr,.hj-table tbody tr{ d...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,141
精华内容 3,656
关键字:

thead固定