我试图使一个表与固定标题和一个可滚动的内容使用引导3表。 不幸的是,我发现的解决方案不工作与bootstrap或混乱的风格。

这里有一个简单的bootstrap表,但由于某种原因,我不知道tbody的高度不是10px。

height: 10px !important; overflow: scroll;

例子:

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <table class="table table-striped"> <thead> <tr> <th>Make</th> <th>Model</th> <th>Color</th> <th>Year</th> </tr> </thead> <tbody style="height: 10px !important; overflow: scroll; "> <tr> <td class="filterable-cell">111 Ford</td> <td class="filterable-cell">Escort</td> <td class="filterable-cell">Blue</td> <td class="filterable-cell">2000</td> </tr> <tr> <td class="filterable-cell">Ford</td> <td class="filterable-cell">Escort</td> <td class="filterable-cell">Blue</td> <td class="filterable-cell">2000</td> </tr> <tr> <td class="filterable-cell">Ford</td> <td class="filterable-cell">Escort</td> <td class="filterable-cell">Blue</td> <td class="filterable-cell">2000</td> </tr> <tr> <td class="filterable-cell">Ford</td> <td class="filterable-cell">Escort</td> <td class="filterable-cell">Blue</td> <td class="filterable-cell">2000</td> </tr> </tbody> </table>


当前回答

既然“所有”浏览器都支持ES6,我已经将上面的各种建议合并到一个JavaScript类中,该类以表作为参数,并使主体可滚动。它让浏览器的布局引擎确定标题和主体单元格的宽度,然后使列的宽度相互匹配。

可以显式地设置表的高度,或者填充浏览器窗口的剩余部分,并提供事件的回调,如视口调整大小和/或细节元素打开或关闭。

多行标头支持是可用的,如果表使用WCAC指南中指定的id/headers属性作为可访问性,这是特别有效的,这并不像看起来那样是一个繁重的要求。

代码不依赖于任何库,但如果使用它们,则可以很好地使用它们。(在使用JQuery的页面上测试)。

代码和示例用法可以在Github上找到。

其他回答

对于纯CSS方法,你需要一个带有overflow-y: auto;并决定如何隐藏滚动/溢出行:

覆盖一个不透明的粘头(位置:粘;上图:0;z-index: 1;),就像@RokoCBuljan的答案一样。 切换行可见性(通过如下所示在属性后设置tr:)。

注意容器可以是一个外部<div>,或者<table>本身,或者它的一部分(例如<tbody>)。后面两个你需要设置display: block;所以实际上他们被当成了潜水者。

请看下面一个修改后的@giulio的解决方案:

:root { --height-height: 150px; /* cell width has to reserve some space for scrolling. Hence the sum < 100% */ --cell-width: 85px; } .header-fixed { width: 200px; } /* Treat all as divs */ .header-fixed > thead, .header-fixed > tbody, .header-fixed > thead > tr, .header-fixed > tbody > tr, .header-fixed > thead > tr > th, .header-fixed > tbody > tr > td { display: block; } /* Prevent header to wrap */ .header-fixed > thead > tr > th { white-space: nowrap; background-color: lightgrey; } .header-fixed > tbody > tr:after, .header-fixed > thead > tr:after { content: ' '; display: block; visibility: hidden; clear: both; } .header-fixed > tbody { overflow-y: auto; height: var(--height-height); } .header-fixed > tbody > tr > td, .header-fixed > thead > tr > th { width: var(--cell-width); border: thin solid grey; float: left; } <table class="header-fixed"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> </tr> </thead> <tbody> <tr> <td>cell 11</td> <td>cell 12</td> </tr> <tr> <td>cell 21</td> <td>cell 22</td> </tr> <tr> <td>cell 31</td> <td>cell 32</td> </tr> <tr> <td>cell 41</td> <td>cell 42</td> </tr> <tr> <td>cell 51</td> <td>cell 52</td> </tr> <tr> <td>cell 61</td> <td>cell 62</td> </tr> <tr> <td>cell 71</td> <td>cell 72</td> </tr> <tr> <td>cell 81</td> <td>cell 82</td> </tr> <tr> <td>cell 91</td> <td>cell 92</td> </tr> </tbody> </table>

注意:如果你有>2列,你需要相应地摆弄var(——cell-width)变量。

这是一个内容可滚动表的实现,仅使用div元素和纯CSS Flexbox样式实现。

.table { display: flex; flex-direction: column; background-color: lightblue; width: 600px; height: 200px; font-family: "Courier New"; } .header { display: flex; flex-direction: row; background-color: whitesmoke; padding-right: 10px; font-weight: bold; } .row { border-bottom: 1px solid gainsboro; } .row>div { width: 25%; text-align: left; } .content { height: 100%; display: flex; flex-direction: column; overflow-y: scroll; } .entry { display: flex; flex-direction: row; padding-top: 5px; } /* Chrome, Edge, Safari and Opera support the non-standard ::-webkit-scrollbar pseudo element. We need the scroll bar width set so as to apply same padding in the table header row for alignment. */ /* width */ ::-webkit-scrollbar { width: 10px; } /* Track */ ::-webkit-scrollbar-track { background: whitesmoke; border-radius: 2px; } /* Handle */ ::-webkit-scrollbar-thumb { background: lightgrey; border-radius: 2px; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: grey; } <div class="table"> <div class="header row"> <div>Fruit</div> <div>Price</div> <div>Quantity</div> <div>In Stock</div> </div> <div class="content"> <div class="entry row"> <div>Apple</div> <div>$10</div> <div>100</div> <div>Yes</div> </div> <div class="entry row"> <div>Pear</div> <div>$2</div> <div>900</div> <div>No</div> </div> <div class="entry row"> <div>Orange</div> <div>$3</div> <div>123400</div> <div>Yes</div> </div> <div class="entry row"> <div>Mongosteen</div> <div>$80</div> <div>5</div> <div>Yes</div> </div> <div class="entry row"> <div>Durian</div> <div>$120</div> <div>988</div> <div>Yes</div> </div> <div class="entry row"> <div>Apple</div> <div>$10</div> <div>100</div> <div>Yes</div> </div> <div class="entry row"> <div>Pear</div> <div>$2</div> <div>900</div> <div>No</div> </div> <div class="entry row"> <div>Orange</div> <div>$3</div> <div>123400</div> <div>Yes</div> </div> <div class="entry row"> <div>Mongosteen</div> <div>$80</div> <div>5</div> <div>Yes</div> </div> <div class="entry row"> <div>Durian</div> <div>$120</div> <div>988</div> <div>Yes</div> </div> </div> </div>

See the Pen

内容可滚动表-仅CSS

by Ruifeng Ma (

@maruifeng

) on

CodePen

.

使用这个链接,stackoverflow.com/a/17380697/1725764,由Hashem Qolami在原始帖子的评论和使用display:内联块,而不是浮动。 如果表也有'table-bordered'类,则修复边界。

table.scroll {
  width: 100%;  
  &.table-bordered {
    td, th {
      border-top: 0;
      border-right: 0;
    }    
    th {
      border-bottom-width: 1px;
    }
    td:first-child,
    th:first-child {
      border-right: 0;
      border-left: 0;
    }
  }
  tbody {
    height: 200px;
    overflow-y: auto;
    overflow-x: hidden;  
  }
  tbody, thead {
    display: block;
  }
  tr {
    width: 100%;
    display: block;
  }
  th, td {
    display: inline-block;

  }
  td {
    height: 46px; //depends on your site
  }
}

然后把td和th的宽度相加

table.table-prep {
  tr > td.type,
  tr > th.type{
    width: 10%;
  }
  tr > td.name,
  tr > th.name,
  tr > td.notes,
  tr > th.notes,
  tr > td.quantity,
  tr > th.quantity{
    width: 30%;
  }
}

固定表头- css

简单位置:粘;上图:0;第th个元素。(Chrome, FF, Edge)

.tableFixHead { overflow: auto; height: 100px; } .tableFixHead thead th { position: sticky; top: 0; z-index: 1; } /* Just common table stuff. Really. */ table { border-collapse: collapse; width: 100%; } th, td { padding: 8px 16px; } th { background:#eee; } <div class="tableFixHead"> <table> <thead> <tr><th>TH 1</th><th>TH 2</th></tr> </thead> <tbody> <tr><td>A1</td><td>A2</td></tr> <tr><td>B1</td><td>B2</td></tr> <tr><td>C1</td><td>C2</td></tr> <tr><td>D1</td><td>D2</td></tr> <tr><td>E1</td><td>E2</td></tr> </tbody> </table> </div>

对于黏滞的垂直TH和水平TH列(在TBODY内部):

.tableFixHead          { overflow: auto; height: 100px; width: 240px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }
.tableFixHead tbody th { position: sticky; left: 0; }

.tableFixHead { overflow: auto; height: 100px; width: 240px; } .tableFixHead thead th { position: sticky; top: 0; z-index: 1; } .tableFixHead tbody th { position: sticky; left: 0; } /* Just common table stuff. Really. */ table { border-collapse: collapse; width: 100%; } th, td { padding: 8px 16px; white-space: nowrap; } th { background:#eee; } <div class="tableFixHead"> <table> <thead> <tr><th></th><th>TH 1</th><th>TH 2</th></tr> </thead> <tbody> <tr><th>Foo</th><td>Some long text lorem ipsum</td><td>Dolor sit amet</td></tr> <tr><th>Bar</th><td>B1</td><td>B2</td></tr> <tr><th>Baz</th><td>C1</td><td>C2</td></tr> <tr><th>Fuz</th><td>D1</td><td>D2</td></tr> <tr><th>Zup</th><td>E1</td><td>E2</td></tr> </tbody> </table> </div>

TH边界问题修复

由于不能在平移后的TH元素上正确地绘制边界, 要重新创建和渲染“边框”,使用box-shadow属性:

/* Borders (if you need them) */
.tableFixHead,
.tableFixHead td {
  box-shadow: inset 1px -1px #000;
}
.tableFixHead th {
  box-shadow: inset 1px 1px #000, 0 1px #000;
}

.tableFixHead { overflow: auto; height: 100px; } .tableFixHead thead th { position: sticky; top: 0; z-index: 1; } /* Just common table stuff. Really. */ table { border-collapse: collapse; width: 100%; } th, td { padding: 8px 16px; } th { background:#eee; } /* Borders (if you need them) */ .tableFixHead, .tableFixHead td { box-shadow: inset 1px -1px #000; } .tableFixHead th { box-shadow: inset 1px 1px #000, 0 1px #000; } <div class="tableFixHead"> <table> <thead> <tr><th>TH 1</th><th>TH 2</th></tr> </thead> <tbody> <tr><td>A1</td><td>A2</td></tr> <tr><td>B1</td><td>B2</td></tr> <tr><td>C1</td><td>C2</td></tr> <tr><td>D1</td><td>D2</td></tr> <tr><td>E1</td><td>E2</td></tr> </tbody> </table> </div>

TH粘不工作修复

确保“th”元素的父元素,至少到表元素(包括),没有设置溢出相关的样式(例如overflow, overflow-x, overflow-y)。

有关更多信息,请参阅stackoverflow.com/Why 'position:粘性'不工作吗?


修正表头-使用JavaScript

对于古老的浏览器,你可以使用一点JS并翻译th元素

// Fix table head example: function tableFixHead(evt) { const el = evt.currentTarget, sT = el.scrollTop; el.querySelectorAll("thead th").forEach(th => th.style.transform = `translateY(${sT}px)` ); } document.querySelectorAll(".tableFixHead").forEach(el => el.addEventListener("scroll", tableFixHead) ); .tableFixHead { overflow-y: auto; height: 100px; } /* Just common table stuff. */ table { border-collapse: collapse; width: 100%; } th, td { padding: 8px 16px; } th { background: #eee; } <div class="tableFixHead"> <table> <thead> <tr><th>TH 1</th><th>TH 2</th></tr> </thead> <tbody> <tr><td>A1</td><td>A2</td></tr> <tr><td>B1</td><td>B2</td></tr> <tr><td>C1</td><td>C2</td></tr> <tr><td>D1</td><td>D2</td></tr> <tr><td>E1</td><td>E2</td></tr> </tbody> </table> </div>

对于满高的表格(页面滚动,而不是表格)

注意:我移动整个<thead>…</ header >因为在我的例子中,我有两行(标题和过滤器)

使用JS (jQuery)

$( function() {

            let marginTop = 0; // Add margin if the page has a top nav-bar
            let $thead = $('.table-fixed-head').find('thead');
            let offset = $thead.first().offset().top - marginTop;
            let lastPos = 0;

            $(window).on('scroll', function () {

                if ( window.scrollY > offset )
                {
                    if ( lastPos === 0 )
                    {
                        // Add a class for styling
                        $thead.addClass('floating-header');
                    }

                    lastPos = window.scrollY - offset;
                    $thead.css('transform', 'translateY(' + ( lastPos ) + 'px)');
                }
                else if ( lastPos !== 0 )
                {
                    lastPos = 0;
                    $thead.removeClass('floating-header');
                    $thead.css('transform', 'translateY(' + 0 + 'px)');
                }
            });
});

CSS(仅用于样式)

 thead.floating-header>tr>th {
       background-color: #efefef;
 }

thead.floating-header>tr:last-child>th {
       border-bottom: 1px solid #aaa;
}