tbody 滚动条

最新推荐文章于 2024-06-17 16:30:49 发布
最新推荐文章于 2024-06-17 16:30:49 发布
阅读量149 收藏
点赞数
文章标签： xhtml
原文链接：https://my.oschina.net/u/3147332/blog/807045
版权
ARRIVALS TO BRISTOL - ENGLAND
FLIGHT CODEFROMSTAETANotes
T3 4264ISLE OF MAN11:4011:42LANDED AT 11:43
BA 4081PARIS-CDG11:4511:57LANDED AT 11:58
BE 843BELFAST CITY11:4511:40LANDED AT 11:41
GR 642GUERNSEY11:5511:38LANDED AT 11:37
EZY 6192PISA12:0512:18LANDED AT 12:17
EZY 6052MALAGA12:1511:55LANDED AT 11:55
EZY 6074ALICANTE12:3512:12LANDED AT 12:14
EZY 6068VALENCIA12:4012:49LANDED AT 12:48
BA 4023GLASGOW12:5012:41LANDED AT 14:08
FR 506DUBLIN13:0012:52LANDED AT 12:51
T3 4264ISLE OF MAN11:4011:42LANDED AT 11:43
BA 4081PARIS-CDG11:4511:57LANDED AT 11:58
BE 843BELFAST CITY11:4511:40LANDED AT 11:41
GR 642GUERNSEY11:5511:38LANDED AT 11:37
EZY 6192PISA12:0512:18LANDED AT 12:17
EZY 6052MALAGA12:1511:55LANDED AT 11:55
EZY 6074ALICANTE12:3512:12LANDED AT 12:14
EZY 6068VALENCIA12:4012:49LANDED AT 12:48
BA 4023GLASGOW12:5012:41LANDED AT 14:08
FR 506DUBLIN13:0012:52LANDED AT 12:51
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
    .table-mod {
        position: relative;
        padding: 52px 0 2px;
        width: 640px;
        background: #eee;
        overflow: hidden;
        word-break: break-all;
        font-family: microsoft yahei;
        font-size: 12px
    }
    .table-hd {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-weight: bold;
        color: #000
    }
    .table-bd {
        overflow: auto;
        height: 300px;
    }
    .table-mod table {
        border-spacing: 2px;
        vertical-align: middle;
        table-layout: inherit
    }
    .table-mod .thead {
        position: absolute;
        top: 28px;
        left: 0;
        padding-right: 27px;
    }
    .table-mod .tbody {
        position: absolute;
        top: 52px;
        left: 0;
        padding-right: 10px;
        overflow-y: auto;
        height: 300px;
        *height: auto;
    }
    .table-mod tfoot td {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 20px;
        line-height: 20px;
        width: 640px;
        text-align: center;
        background: #f0c992;
        color: #000
    }
    .table-mod th,
    .table-mod td {
        width: 120px;
        height: 20px;
        text-align: left;
    }
    .table-mod th {
        background: #724a10;
        color: #fff;
    }
    .table-mod .bgc-white {
        background-color: #fff;
    }
    .table-mod .td2 {
        width: 180px;
    }
    </style>
</head>

<body>
    <div class="table-mod">
        <div class="table-hd">ARRIVALS TO BRISTOL - ENGLAND</div>
        <div class="table-bd">
            <table>
                <thead class="thead">
                    <tr>
                        <th>FLIGHT CODE</th>
                        <th class="th td2">FROM</td>
                            <th>STA</td>
                                <th>ETA</td>
                                    <th class="nd">Notes</td>
                    </tr>
                    </tdead>
                    <tbody class="tbody">
                        <tr>
                            <th>T3 4264</td>
                                <td class="td2">ISLE OF MAN</th>
                            <td>11:40</td>
                            <td>11:42</td>
                            <td>LANDED AT 11:43</td>
                        </tr>
                        <tr class="bgc-white">
                            <th>BA 4081</th>
                            <td class="td2">PARIS-CDG</td>
                            <td>11:45</td>
                            <td>11:57</td>
                            <td>LANDED AT 11:58</td>
                        </tr>
                        <tr>
                            <th>BE 843</th>
                            <td class="td2">BELFAST CITY</td>
                            <td>11:45</td>
                            <td>11:40</td>
                            <td>LANDED AT 11:41</td>
                        </tr>
                        <tr class="bgc-white">
                            <th>GR 642</th>
                            <td class="td2">GUERNSEY</td>
                            <td>11:55</td>
                            <td>11:38</td>
                            <td>LANDED AT 11:37</td>
                        </tr>
                        <tr>
                            <th>EZY 6192</th>
                            <td>PISA</td>
                            <td>12:05</td>
                            <td>12:18</td>
                            <td>LANDED AT 12:17</td>
                        </tr>
                        <tr class="bgc-white">
                            <th>EZY 6052</th>
                            <td class="td2">MALAGA</td>
                            <td>12:15</td>
                            <td>11:55</td>
                            <td>LANDED AT 11:55</td>
                        </tr>
                        <tr>
                            <th>EZY 6074</th>
                            <td class="td2">ALICANTE</td>
                            <td>12:35</td>
                            <td>12:12</td>
                            <td>LANDED AT 12:14</td>
                        </tr>
                        <tr class="bgc-white">
                            <th>EZY 6068</th>
                            <td class="td2">VALENCIA</td>
                            <td>12:40</td>
                            <td>12:49</td>
                            <td>LANDED AT 12:48</td>
                        </tr>
                        <tr>
                            <th>BA 4023</th>
                            <td class="td2">GLASGOW</td>
                            <td>12:50</td>
                            <td>12:41</td>
                            <td>LANDED AT 14:08</td>
                        </tr>
                        <tr class="bgc-white">
                            <th>FR 506</th>
                            <td class="td2">DUBLIN</td>
                            <td>13:00</td>
                            <td>12:52</td>
                            <td>LANDED AT 12:51</td>
                        </tr>
                        <tr>
                            <th>T3 4264</th>
                            <td class="td2">ISLE OF MAN</td>
                            <td>11:40</td>
                            <td>11:42</td>
                            <td>LANDED AT 11:43</td>
                        </tr>
                        <tr class="bgc-white">
                            <th>BA 4081</th>
                            <td class="td2">PARIS-CDG</td>
                            <td>11:45</td>
                            <td>11:57</td>
                            <td>LANDED AT 11:58</td>
                        </tr>
                        <tr>
                            <th>BE 843</th>
                            <td class="td2">BELFAST CITY</td>
                            <td>11:45</td>
                            <td>11:40</td>
                            <td>LANDED AT 11:41</td>
                        </tr>
                        <tr class="bgc-white">
                            <th>GR 642</th>
                            <td class="td2">GUERNSEY</td>
                            <td>11:55</td>
                            <td>11:38</td>
                            <td>LANDED AT 11:37</td>
                        </tr>

                    </tbody>
            </table>
        </div>
    </div>
</body>

</html>

 

转载于:https://my.oschina.net/u/3147332/blog/807045

chengweng2602
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
tbody 实现无错位的滚动条
路人甲的博客
03-02 361
<table border="0" cellpadding="1" cellspacing="0" style="margin-left: 1%;"> <tr><td colspan="3"> <div style="margin:0px;padding:0px;width:auto;"> <table id="titleTa...
CSS设置table下tbody滚动条与thead对齐的方法
小白变不白
04-18 5964
威易网CSS教程 table tbody {     display:block;     height:195px;     overflow-y:scroll; } table thead, tbody tr {     display:table;     width:100%;     table-layout:fixed; } table thead {
可滚动的 tbody
张营的技术博客
09-28 287
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .fixed_header{ width: 400px; } .fixed_header thead { backgro
完美tbody滚动效果
There is no one l would rather be than me
01-08 878
效果图： 源码： <!DOCTYPE html> <html> <head> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } .mytable{ width: 800px; background-col.
＜tbody＞出现滚动条后，同＜thead＞对不齐的解决方案
最新发布
ElectronStorm的专栏
06-17 458
第四步，编写js，当表体.scrollHeight > 表体.clientHeight时，表明出现了滚动条，则为表头添加scroll-thead样式，同时为表格整体添加scroll-table样式。否则就为表头添加.no-scroll-thead样式，同时为表格整体添加no-scroll-table样式即可。如上处理后，表头和表体能对齐，但如果表体出现滚动条，两者就会对不齐了。第一步，将table和thead分别加上ref（refTable, refTHeader)需求是需要表格滚动，并且表头不动。
html 滚动条_HTML table表格 固定表头 tbody加滚动条
weixin_39520775的博客
11-23 285
纯CSS table表格 thead固定 tbody滚动效果由于项目需要，在表格中，当数据量越来越多时，就会出现滚动条，而在滚动的过程中，默认情况下表格头部会跟着表格内容一起滚动，导致看不到头部对应的字段名，影响体验效果！实现思路：将内容要滚动的区域控制在 tbody 标签中添加 overflow-y: auto; 样式，给 tr 标签添加 table-layout:fixed; (这是核心)样式...
table表格，thead固定，tbody滚动
icemwj的博客
04-04 870
table表格，thead固定，tbody滚动
简单的自定义固定表头thead tbody滚动 第二版
RD_moon的博客
09-06 3521
固定表头thead  ，之前在网上看到的各种方法，感觉都不是我想要的结果，自己尝试写了一下，当然，网上也有插件可以用，自己百度一下，引入了插件后，一行代码就搞定；
CSS设置table下tbody的滚动条的实现
09-22
CSS设置table下tbody的滚动条实现是一种网页布局技术，能够让HTML表格的tbody部分在内容超出可视区域时显示出垂直滚动条，而thead（表头）则保持固定不动。这种技术在制作具有大量数据内容的网页表格时非常有用，...
bootstrap表格固定表头并且tbody部分添加滚动条
10-24
Bootstrap表格在设计网页时是一种非常常用的组件，尤其在处理大量数据时，为了提供更好的用户体验，我们经常需要在tbody部分添加竖向滚动条，同时保持表头固定不动。这样，当用户滚动内容时，表头始终保持可见，便于...
用css给tbody加垂直滚动条的具体思路及样式代码
12-13
在网页设计中，有时我们需要对表格的 tbody 部分添加垂直滚动条，以便当数据过多时，用户可以轻松地浏览和查看所有信息。这里我们将详细介绍如何使用 CSS 实现这一功能，并提供相应的代码示例。 首先，理解核心思路...
table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法
09-30
table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table...
关于tbody的用法
Cedar's Columnists
04-15 993
表格的分组显示(Structured Table) （IExplore Only）   1）按行分组   ... -表的题头(Header) ... - 表的正文(Body) ... - 表的脚注(Footer)   例： FoodDrinkSweet ABCDEF   2）按列分组  
js实现表格按行滚动
weixin_55510188的博客
09-02 2904
3、滚动控制：为了实现按行滚动，需要拿到div表格的每一行的高度，然后定时、逐行执行滚动（即对tbody滚动高度值定时进行累加，每次累加表格行的高度，然后tbody的style属性的top取滚动高度值的负值）。1、表格模仿table的结构，使用div元素构建，其中在tbody外包了一层div(tbody-container)，以便对超出tbody-container的内容进行隐藏。最近又有同样的需求，不过是vue项目，所以又做了一个基于 js实现的表格按行滚动，原理相同。优化了表格内容见底后即滚回顶部。
table的tbody设置高度不成功问题
似水流年，举重若轻
10-16 5631
给tbody加上position:absolute 属性
设置table中的tbody
heliuerya的博客
02-17 807
设置table中的tbody
html 控制表格Tbody内容滚动
typeof_yaco的博客
12-20 3911
html里面表格是不容易控制的元素，我在项目中遇到过想让tbody内容超出后滚动，我尝试了很多办法，比如把thead设置position：absolute；再设置top啊，margin啊。。。都感觉不太好。 直接设置tbody  overflow：scroll / auto； 是不管用的，要把 thead 和 tbody 都设置display：block； tbody
[Javascript]深入浅出tbody
seabreezesuper的博客
03-16 3739
做Web开发，生成表格几乎是家常便饭，我们印象中的表格代码通常是这样的：<table> <tr><td></td></tr> <tr><td></td></tr> <tr><td></td></tr> </table>但是，你会发现有些网站的Table结构是这样的：<table> <thead> <tr><td></td></tr> </the
table下tbody滚动条与thead对齐的方法且每一列可以不均等
05-25
要实现table下的tbody滚动条与thead对齐的效果，可以使用以下方法： 1. 将thead与tbody分开放到两个div中，一个div用于显示thead，另一个div用于显示tbody，这两个div都设置为相同的宽度。 2. 对于tbody所在的div，设置overflow属性为auto，这样当tbody内容超出div的高度时，会自动生成滚动条。 3. 针对每一列，可以通过设置不同的宽度来实现不均等。 具体实现代码如下： HTML代码： ``` <div class="table-container"> <div class="thead-container"> <table> <thead> <tr> <th style="width: 100px;">列1</th> <th style="width: 200px;">列2</th> <th style="width: 150px;">列3</th> <th style="width: 50px;">列4</th> </tr> </thead> </table> </div> <div class="tbody-container"> <table> <tbody> <tr> <td style="width: 100px;">内容1</td> <td style="width: 200px;">内容2</td> <td style="width: 150px;">内容3</td> <td style="width: 50px;">内容4</td> </tr> <tr> <td style="width: 100px;">内容1</td> <td style="width: 200px;">内容2</td> <td style="width: 150px;">内容3</td> <td style="width: 50px;">内容4</td> </tr> <!-- more rows --> </tbody> </table> </div> </div> ``` CSS代码： ``` .table-container { display: flex; flex-direction: column; height: 300px; /* 设置表格高度 */ } .thead-container { overflow: hidden; height: 30px; /* 设置表头高度 */ } .thead-container table { width: 100%; /* 与tbody-container同宽 */ border-collapse: collapse; } .tbody-container { flex: 1; overflow: auto; /* 当tbody内容超出div高度时，显示滚动条 */ } .tbody-container table { width: 100%; /* 与thead-container同宽 */ border-collapse: collapse; } .tbody-container td, .tbody-container th { white-space: nowrap; /* 防止文字换行 */ } ``` 通过以上代码，就可以实现thead与tbody对齐，并且每一列可以不均等的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值