时间戳

首页 > 解决方案 > 具有固定标题和可扩展行的可滚动表

javascript - 具有固定标题和可扩展行的可滚动表

问题描述

是否可以有一个带有固定标题的可滚动 HTML 表格，例如：

http://jsfiddle.net/T9Bhm/7/

但是这些行也可以像这样展开 onclick：

http://jsfiddle.net/Pn3m5/

我已经能够单独复制每个效果，但不能在同一张表中复制两种效果。

我尝试使用以下样式方法：

<style>
    * {box-sizing: border-box} 
    table {
        width: 100%;
    }
    table, td {
        border-collapse: collapse;
        border: 1px solid #000;
    }
    thead {
        display: table; 
        width: 100%
    }
    tbody {
        display: block; 
        max-height: 950px; 
        overflow-y: scroll;
    }
    td, th {
        text-align: center;
        border-bottom: none;
        border-left: none;
    }
</style>

在可扩展的行表上，但它不会产生所需的结果。这可能吗（在 CSS 或 JavaScript 中）？

标签： javascripthtmlcsshtml-table

解决方案

在这里工作 JS Fiddle

不得不制作一个自定义脚本并稍微更改一下html。为了让粘性标题工作，我使用了一种技术，你有两个表。第一个表呈现thead，第二个表呈现tbody.

对于可扩展行，您现在将创建一个trwith 类expandable-row和一个兄弟tr（可扩展行之后的下一个元素），其中的类content存储您的可扩展内容：

<tr class="expandable-row">
    <td>
      +
    </td>
    <td>Fred</td>
    <td>30</td>
  </tr>
  <tr class="content">
    <td colspan="3">
      <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td>
  </tr>

我试图保留流畅的动画以显示/隐藏内容，但效果不佳。取消注释该slideToggle行以将其添加回来。

$(function() {
  $(".content").hide();

  $('.expandable-row').click(function(e) {
    $(this).next('.content').toggle();
    //$(this).next('.content').slideToggle();
  });

});
table {
  border: 1px solid gray;
}

.table-header, .table-body tbody {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.table-header tr,
.table-body tr {
  height: 30px;
  border-bottom: 1px solid gray;
}

.table-body {
  height: 150px;
  overflow: auto;
  display: block;
}

tbody .expandable-row:nth-child(odd) {
  background: #f9f9f9;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click on a row for more info:
<table class="table-header">
  <thead>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
</table>
<table class="table-body">
  <tr class="expandable-row">
    <td>
      +
    </td>
    <td>Fred</td>
    <td>30</td>
  </tr>
  <tr class="content">
    <td colspan="3">
      <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td>
  </tr>
  <tr class="expandable-row">
    <td>
      +
    </td>
    <td>Fred</td>
    <td>30</td>
  </tr>
  <tr class="content">
    <td colspan="3">
      <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td>
  </tr><tr class="expandable-row">
    <td>
      +
    </td>
    <td>Fred</td>
    <td>30</td>
  </tr>
  <tr class="content">
    <td colspan="3">
      <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td>
  </tr><tr class="expandable-row">
    <td>
      +
    </td>
    <td>Fred</td>
    <td>30</td>
  </tr>
  <tr class="content">
    <td colspan="3">
      <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td>
  </tr><tr class="expandable-row">
    <td>
      +
    </td>
    <td>Fred</td>
    <td>30</td>
  </tr>
  <tr class="content">
    <td colspan="3">
      <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td>
  </tr><tr class="expandable-row">
    <td>
      +
    </td>
    <td>Fred</td>
    <td>30</td>
  </tr>
  <tr class="content">
    <td colspan="3">
      <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td>
  </tr><tr class="expandable-row">
    <td>
      +
    </td>
    <td>Fred</td>
    <td>30</td>
  </tr>
  <tr class="content">
    <td colspan="3">
      <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td>
  </tr><tr class="expandable-row">
    <td>
      +
    </td>
    <td>Fred</td>
    <td>30</td>
  </tr>
  <tr class="content">
    <td colspan="3">
      <p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
    </td>
  </tr>
</table>

推荐阅读