Прокручиваемая таблица с фиксированным заголовком и расширяемыми строками

Question

Возможно ли иметь прокручиваемую таблицу HTML с фиксированным заголовком, например:

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

Но строки также могут расширяться при щелчке следующим образом:

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

Answer 1

Я достиг этого в прошлом, используя серию div, чтобы действовать в качестве заголовков столбцов таблицы, расположенных над прокручиваемой таблицей.Используя javascript, я изменил ширину верхнего (заголовка) div'а, чтобы он соответствовал ширине td в таблице под ним, используя обработчик событий.

Хитрость заключалась в том, чтобы установить стиль div в display: inline-grid;

Answer 2

Рабочая JS Fiddle Здесь

Пришлось создать собственный скрипт и немного изменить html.Чтобы заставить липкие заголовки работать, я использую технику, где у вас есть две таблицы.Первая таблица отображает thead, а вторая таблица отображает tbody.

Для расширяемых строк вы теперь создадите tr с классом expandable-row и родным элементом tr (следующий элемент после расширяемой строки) с классом content, в котором хранятся ваши расширяемые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>