Зафиксированный <thead> в <таблице>

<table border="1" style="height:50px; overflow:auto;">
  <thead>
    <tr>
      <th>Col 1
      </th>
      <th>Col 2
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell 3
      </td>
      <td>Cell 4
      </td>
    </tr>
    <tr>
      <td>Cell 5
      </td>
      <td>Cell 6
      </td>
    </tr>
  </tbody>
</table>

Я хотел бы, чтобы приведенная выше таблица была 50 пкс высотой, таким образом, скроллеры умрут, когда содержание вырастет, но я также хотел бы, чтобы заголовки таблицы (thead) были исправлены поверх остальных окон, в то время как другое содержание может быть с возможностью прокрутки. Существует ли решение, предпочтительное использование jQuery?

Заранее спасибо за Вашу справку.

5
задан Josh Darnell 4 January 2012 в 15:17
поделиться

2 ответа

Попробуйте этот пост: jQuery Scrollable, Sortable, Filterable Table

Похоже, у них есть то, что вам нужно (это прокручиваемая, прокручиваемая jquery Table).

2
ответ дан 13 December 2019 в 19:28
поделиться
<table style="width: 300px" cellpadding="0" cellspacing="0">
<tr>
  <td>Column 1</td>
  <td>Column 2</td>
</tr>
</table>

<div style="overflow: auto;height: 50px; width: 320px;">
  <table style="width: 300px;" cellpadding="0" cellspacing="0">
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td>Value 1</td>
    <td>Value 2</td>
  </tr>
  </table>
</div>

Обновление:

Проверьте это:

Ссылка

Другая ссылка на CSS-трики

0
ответ дан 13 December 2019 в 19:28
поделиться
Другие вопросы по тегам:

Похожие вопросы: