表固定标题和可滚动的主体

Question

表固定标题和可滚动的主体

giu*_*lio 207 html css html-table twitter-bootstrap

我正在尝试使用bootstrap 3表创建一个具有固定标头和可滚动内容的表.不幸的是,我发现的解决方案不适用于bootstrap或搞乱风格.

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

height: 10px !important; overflow: scroll;

Run Code Online (Sandbox Code Playgroud)

例:

<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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Rok*_*jan 162

固定台面头 - 仅限CSS

只是position: sticky; top: 0;你的th元素.(Chrome,FF,Edge)

.tableFixHead          { overflow-y: auto; height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; }

/* Just common table stuff. Really. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

固定桌头 - 使用JS

您可以使用一些JS和平移Y的th元素

jQuery示例

var $th = $('.tableFixHead').find('thead th')
$('.tableFixHead').on('scroll', function() {
  $th.css('transform', 'translateY('+ this.scrollTop +'px)');
});

Run Code Online (Sandbox Code Playgroud)

.tableFixHead { overflow-y: auto; height: 100px; }

/* Just common table stuff. */
table  { border-collapse: collapse; width: 100%; }
th, td { padding: 8px 16px; }
th     { background:#eee; }

Run Code Online (Sandbox Code Playgroud)

<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>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

Run Code Online (Sandbox Code Playgroud)

或者如果你喜欢简单的ES6(不需要jQuery):

// Fix table head
function tableFixHead (e) {
    const el = e.target,
          sT = el.scrollTop;
    el.querySelectorAll("thead th").forEach(th => 
      th.style.transform = `translateY(${sT}px)`
    );
}
document.querySelectorAll(".tableFixHead").forEach(el => 
    el.addEventListener("scroll", tableFixHead)
);

Run Code Online (Sandbox Code Playgroud)

哇,这是开销最小的最佳选择!它也适用于开箱即用的overflow-x. (10认同)
是的！即使使用可变单元格宽度也能工作（无需像其他示例中那样对单元格宽度进行硬编码）@Wish (3认同)
当表标题中有多于一行时不起作用。滚动时，第二个标题行会向上跳跃并覆盖第一个标题行，因为它们都有“top：0”。修补了整个 <thead> 粘性但无法使其工作。关于多行标题（带有 colspans 来启动）有什么想法吗？ (3认同)
好方案!谢谢 (2认同)
我发现这适用于Chrome和Firefox,但使用此方法不会在Edge或IE11中修复标题. (2认同)
@PussInBoots在上面的例子中？铬？什么都没跳 (2认同)
如果`{position:sticky;的顶部解决方案顶部：0；}` 不知何故在您的代码中不起作用 - 检查包含元素的 `overflow-x` 和 `overflow-y` css 属性，尤其是 `table`、`thead`、`tr`。令人惊讶的是，溢出是不能设置的。您可能需要显式“取消设置”它们。更多信息 - /sf/answers/3836460351/ (2认同)

Answer 2

Ale*_*aus 83

可能你会在一个页面上得到多个表,因此你需要CSS类.请找一个修改过的@ giulio解决方案.

只需在表格中声明:

<table class="table table-striped header-fixed"></table>

Run Code Online (Sandbox Code Playgroud)

CSS

.header-fixed {
    width: 100% 
}

.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;
}

.header-fixed > tbody > tr:after,
.header-fixed > thead > tr:after {
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

.header-fixed > tbody {
    overflow-y: auto;
    height: 150px;
}

.header-fixed > tbody > tr > td,
.header-fixed > thead > tr > th {
    width: 20%;
    float: left;
}

Run Code Online (Sandbox Code Playgroud)

请注意,当前实现仅适用于五列.如果需要不同的数字,请将width参数从20%更改为*100%/ number_of_columns*.

我建议你添加`.header-fixed> thead> tr> th {white-space:nowrap;}`.如果标题开始包装它会让事情变得混乱 (4认同)
在遵循所有不同的复杂解决方案之后,我发现这是最好的解决方案.然而,垂直滚动条处有一些宽度(很明显),但由于它,标题和行之间存在轻微的不匹配对齐.我有7列,所以在使用提及公式计算后,我将宽度设置为14.28% (2认同)

Answer 3

giu*_*lio 80

这是工作解决方案:

table {
    width: 100%;
}

thead, tbody, tr, td, th { display: block; }

tr:after {
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

thead th {
    height: 30px;

    /*text-align: left;*/
}

tbody {
    height: 120px;
    overflow-y: auto;
}

thead {
    /* fallback */
}


tbody td, thead th {
    width: 19.2%;
    float: left;
}

Run Code Online (Sandbox Code Playgroud)

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-striped">
    <thead>
        <tr>
            <th>Make</th>
            <th>Model</th>
            <th>Color</th>
            <th>Year</th>
        </tr>
    </thead>
    <tbody>
        <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>
        <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>

Run Code Online (Sandbox Code Playgroud)

链接到jsfiddle

在IE9(可能还有其他)中不起作用; 需要固定宽度的列(如果你要使用固定宽度的列,还有更简单,更多的跨浏览器解决方案); 如果内容超过固定宽度,则会严重破坏; 实际上并没有排列标题和列(您可以在[上面链接的小提琴](http://jsfiddle.net/T9Bhm/7)中看到它;它在[此版本]中更清晰(http:// jsfiddle .net/T9Bhm/489)给他们一个简单的边框)虽然这可能是固定的; 滚动条与桌子的主体不完全对齐...... (29认同)
该解决方案的问题在于它需要固定的高度.在响应式设计进入的情况下,这不会起作用.我一直在研究使用position:fixed的解决方案,它解决了滚动问题,但会弄乱行宽. (2认同)

Answer 4

Ros*_*sim 54

我在GitHub上使用StickyTableHeaders,它就像魅力一样!

我不得不添加这个css,使标题不透明.

table#stickyHeader thead {
  border-top: none;
  border-bottom: none;
  background-color: #FFF;
}

Run Code Online (Sandbox Code Playgroud)

请注意,stickyTableHeaders插件只会在浏览器最初加载时找到页面中的html,它不会拾取动态生成的内容 (8认同)
@RobSedgwick,我没有这个,但它应该仍然有效.只要初始化stickyTableHeadres _AFTER_,就会生成表.这意味着您不能在头部初始化它,而是在动态生成的表完成后立即初始化它. (3认同)

Answer 5

Pim*_*Web 36

不需要将它包裹在div中...

CSS:

tr {
width: 100%;
display: inline-table;
table-layout: fixed;
}

table{
 height:300px;              // <-- Select the height of the table
 display: -moz-groupbox;    // Firefox Bad Effect
}
tbody{
  overflow-y: scroll;      
  height: 200px;            //  <-- Select the height of the body
  width: 100%;
  position: absolute;
}

Run Code Online (Sandbox Code Playgroud)

Bootply:http://www.bootply.com/AgI8LpDugl

这看起来很棒,直到您意识到列数据必须具有相同的宽度.如果没有,则数据不符合标题. (4认同)
仅作评论，该表格对我在Chrome中有效，表格位于页面内容的中间顶部。...您能提供更多信息吗？（我在linux上） (2认同)

Answer 6

Mer*_*sek 19

使用css更容易

table tbody { display:block; max-height:450px; overflow-y:scroll; }
table thead, table tbody tr { display:table; width:100%; table-layout:fixed; }

Run Code Online (Sandbox Code Playgroud)

“th”与“td”不一致 (3认同)

Answer 7

St *_*ohn 17

到目前为止，我见过的最好的解决方案只有 CSS，具有良好的跨浏览器支持，并且没有对齐问题是来自 codingrabbithole 的解决方案

table {
  width: 100%;
}
thead, tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
tbody {
  display: block;
  overflow-y: auto;
  table-layout: fixed;
  max-height: 200px;
}

Run Code Online (Sandbox Code Playgroud)

我跳过了这个答案，以获取下面 @Roko C. Buljan 评分更高的答案，却发现当标题有多行时，该答案不起作用。这个解决方案效果很好。太感谢了！！！ (4认同)
与顶部解决方案不同，这需要将表格高度设置为低于页面，并且还会出现额外的内部滚动条。有时这就是您想要的（例如，对于固定大小的内部表），但否则它并不理想。 (3认同)

Answer 8

小智 14

晚到了派对(我生命的故事),但由于这是谷歌的第一个结果,而且以上都没有让我工作,这里是我的代码

/*Set a min width where your table start to look like crap*/
table { min-width: 600px; }

/*The next 3 sections make the magic happen*/
thead, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

tbody {
    display: block;
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: scroll;
}

td {
    overflow: hidden;
    text-overflow: ellipsis;
}

/*Use the following to make sure cols align correctly*/
table, tr, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}


/*Set your columns to where you want them to be, skip the one that you can have resize to any width*/
    th:nth-child(1), td:nth-child(1) {
    width: 85px;
}
th:nth-child(2), td:nth-child(2) {
    width: 150px;
}
th:nth-child(4), td:nth-child(4) {
    width: 125px;
}
th:nth-child(5) {
    width: 102px;
}
td:nth-child(5) {
    width: 85px;
}

Run Code Online (Sandbox Code Playgroud)

它对我有用,但现在所有的td都有相同的宽度.我不想要的. (2认同)

Answer 9

Tom*_*Dom 14

table {
    overflow-y: auto;
    height: 50vh;     /* !!!  HEIGHT MUST BE IN [ vh ] !!! */
}

thead th {
    position: sticky;
    top: 0;
}

Run Code Online (Sandbox Code Playgroud)

   <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>
        <tr><td>F1</td><td>F2</td></tr>
        <tr><td>G1</td><td>G2</td></tr>
        <tr><td>H1</td><td>H2</td></tr>
        <tr><td>I1</td><td>I2</td></tr>
        <tr><td>J1</td><td>J2</td></tr>
        <tr><td>K1</td><td>K2</td></tr>
        <tr><td>L1</td><td>L2</td></tr>
        <tr><td>M1</td><td>M2</td></tr>
        <tr><td>N1</td><td>N2</td></tr>
        <tr><td>O1</td><td>O2</td></tr>
        <tr><td>P1</td><td>P2</td></tr>
        <tr><td>Q1</td><td>Q2</td></tr>
        <tr><td>R1</td><td>R2</td></tr>
        <tr><td>S1</td><td>S2</td></tr>
        <tr><td>T1</td><td>T2</td></tr>
        <tr><td>U1</td><td>U2</td></tr>
        <tr><td>V1</td><td>V2</td></tr>
        <tr><td>W1</td><td>W2</td></tr>
        <tr><td>X1</td><td>X2</td></tr>
        <tr><td>Y1</td><td>Y2</td></tr>
        <tr><td>Z1</td><td>Z2</td></tr>
      </tbody>
    </table>

Run Code Online (Sandbox Code Playgroud)

你不需要js。重要的是在 [ vh ] 中设置表格高度

Answer 10

小智 11

在我看来,jQuery最好的插件之一是DataTables.

它还具有固定标头的扩展,并且非常容易实现.

取自他们的网站:

HTML:

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
        </tr>
  </tbody>
</table>

Run Code Online (Sandbox Code Playgroud)

JavaScript的:

$(document).ready(function() {
    var table = $('#example').DataTable();

    new $.fn.dataTable.FixedHeader( table );
} );

Run Code Online (Sandbox Code Playgroud)

但是,制作可滚动的最简单的方法<tbody>是:

//configure table with fixed header and scrolling rows
$('#example').DataTable({
    scrollY: 400,
    scrollCollapse: true,
    paging: false,
    searching: false,
    ordering: false,
    info: false
});

Run Code Online (Sandbox Code Playgroud)

Answer 11

小智 7

最新的添加位置：'sticky' 将是这里最简单的解决方案

.outer{
    overflow-y: auto;
    height:100px;
    }

.outer table{
    width: 100%;
    table-layout: fixed; 
    border : 1px solid black;
    border-spacing: 1px;
}

.outer table th {
        text-align: left;
        top:0;
        position: sticky;
        background-color: white;  
}

Run Code Online (Sandbox Code Playgroud)

 <div class = "outer">
 <table>
             <tr >
              <th>col1</th>
              <th>col2</th>
              <th>col3</th>
              <th>col4</th>
               <th>col5</th>
             <tr>
                       
            <tr >
              <td>data</td>
              <td>data</td>
               <td>data</td>
              <td>data</td>
              <td>data</td>
            <tr>
             <tr >
               <td>data</td>
              <td>data</td>
               <td>data</td>
              <td>data</td>
              <td>data</td>
            <tr>
             <tr >
                <td>data</td>
              <td>data</td>
               <td>data</td>
              <td>data</td>
              <td>data</td>
            <tr>
             <tr >
                <td>data</td>
              <td>data</td>
               <td>data</td>
              <td>data</td>
              <td>data</td>
            <tr>
             <tr >
                 <td>data</td>
              <td>data</td>
               <td>data</td>
              <td>data</td>
              <td>data</td>
            <tr>
             <tr >
                 <td>data</td>
              <td>data</td>
               <td>data</td>
              <td>data</td>
              <td>data</td>
            <tr>
 </table>
 </div>

Run Code Online (Sandbox Code Playgroud)

Answer 12

Ers*_*tas 5

单个窗口中支持多个可滚动表格。

纯 CSS & 无固定或粘性。

我多年来一直在使用自动“td”和“th”宽度搜索固定表头。最后我编码了一些东西，它对我来说效果很好，但我不确定它是否适合每个人。

问题 1：当有大量“tr”时，我们无法设置表格或 tbody 高度，这是因为默认的表格属性。

解决办法：给table设置一个显示属性。

问题2：当我们设置显示属性时，“td”元素的宽度不能等于“th”元素的宽度。而且像 100% 这样的全宽表格很难正确填充元素。

解决方案： CSS“flex”对于宽度和填充设置来说是非常好的解决方案，因此我们将使用 CSS“flex”构建 tbody 和 thead 元素。

.ea_table {
  border: 1px solid #ddd;
  display: block;
  background: #fff;
  overflow-y: hidden;
  box-sizing: border-box;
  float: left;
  height:auto;
  width: 100%;
}

.ea_table tbody, thead {
  flex-direction: column;
  display: flex;
}

.ea_table tbody {
  height: 300px;
  overflow: auto;
}

.ea_table thead {
  border-bottom: 1px solid #ddd;
}

.ea_table tr {
  display: flex;
}


.ea_table tbody tr:nth-child(2n+1) {
  background: #f8f8f8;
  }

.ea_table td, .ea_table th {
  text-align: left;
  font-size: 0.75rem;
  padding: 1.5rem;
  flex: 1;
}

Run Code Online (Sandbox Code Playgroud)

<table class="ea_table">
    <thead>
      <tr>
        <th>Something Long</th>
        <th>Something </th>
        <th>Something Very Long</th>
        <th>Something Long</th>
        <th>Some</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>
      <tr>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>
      <tr>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>
      <tr>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>
      <tr>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>
      <tr>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>
      <tr>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>
      <tr>
        <td> Lorem Ipsum Dolar Sit Amet</td>
        <td> Lorem </td>
        <td> Lorem Ipsum </td>
        <td> Lorem </td>
        <td> Lorem Ipsum Dolar </td>
      </tr>

    </tbody>

  </table>

Run Code Online (Sandbox Code Playgroud)

jsfiddle

归档时间：	11 年，7 月前
查看次数：	670153 次
最近记录：	5 年，11 月前