Добавить полосу прокрутки в тело таблицы

Я хочу сделать это как можно проще без каких-либо дополнительных библиотек.

В моей очень длинной таблице я хочу добавить полосу прокрутки в тег <tbody>, чтобы голова всегда была видимой, но она не будет работать. вы можете помочь.

скрипт: http://jsfiddle.net/Hpx4L/

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody style="overflow-y:scroll; height:100px;"> <!-- wont work -->
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
          <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

Ответ 1

вы можете обернуть содержимое <tbody> в прокручиваемом <div>:

HTML

....
<tbody>
  <tr>
    <td colspan="2">
      <div class="scrollit">
        <table>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
          <tr>
            <td>February</td>
            <td>$80</td>
          </tr>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
          <tr>
            <td>February</td>
            <td>$80</td>
          </tr>
          ...

CSS

.scrollit {
    overflow:scroll;
    height:100px;
}

см. мой jsfiddle, разветвленный от вашего: http://jsfiddle.net/VTNax/2/

Ответ 2

У этих решений часто возникают проблемы с выравниванием столбцов заголовка с столбцами тела и может не работать должным образом при изменении размера. Я знаю, что вы не хотите использовать дополнительную библиотеку, но если вы используете jQuery, это действительно мало. Он поддерживает фиксированный заголовок, нижний колонтитул, колонку spanning (colspan), горизонтальную прокрутку, изменение размера и необязательное количество строк для отображения до начала прокрутки.

jQuery.scrollTableBody(GitHub)

Пока у вас есть таблица с соответствующими <thead>, <tbody> и (необязательно) <tfoot>, все, что вам нужно сделать, это:

$('table').scrollTableBody();

Ответ 3

Это связано с тем, что вы добавляете свой тег <tbody> до <td> в таблице, вы не можете печатать какие-либо данные без <td>.

Итак, для этого вам нужно сделать <div> сказать #header с помощью position: fixed;

 header
 {
      position: fixed;
 }

сделать еще один <div>, который будет действовать как <tbody>

tbody
{
    overflow:scroll;
}

Теперь ваш заголовок фиксирован, и тело будет прокручиваться. И заголовок останется там.

Ответ 4

Если вы не хотите обертывать таблицу под любым div:

table{
  table-layout: fixed;
}
tbody{
      display: block;
    overflow: auto;
}