Прокручиваемая таблица HTML с фиксированным заголовком и фиксированным столбцом - PullRequest
Новая
       37

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

5 голосов
/ 24 декабря 2011

Я хотел бы создать таблицу с прокручиваемыми данными.Я должен заморозить первый ряд и первый столбец таблицы.Первая строка и первый столбец таблицы должны автоматически изменять размеры по ширине и высоте для переменных размеров ячеек в области содержимого таблицы (поскольку пользователь будет добавлять новые ячейки таблицы с переменным количеством содержимого).

Кто-то задал связанный вопрос: Как заблокировать первую строку и первый столбец таблицы при прокрутке, возможно, с использованием JavaScript и CSS?

Но ссылка на онлайн-демонстрацию и исходный кодмертв, поэтому я не могу подтвердить решение.

Ответы [ 3 ]

4 голосов
/ 30 января 2013

Используйте превосходные jQuery Datables с расширением FixedHeader .

Прокрутите вниз строку заголовка, и вы увидите, что она аккуратно склеивается с верхней частью экрана.

Для верхнего и нижнего колонтитула, левого и правого возбуждения:

http://datatables.net/release-datatables/extras/FixedHeader/top_bottom_left_right.html

3 голосов
/ 24 декабря 2011

Хорошо, я прочитал много ответов в Интернете и, наконец, собрал демо, которое сработало.Я использую PHP для создания 50 строк в таблице, но вы можете так же легко жестко кодировать данные.По сути, я создал четыре квадранта (div.q1, div.q2, div.q3 и div.q4), где четвертый квадрант содержит фактическую таблицу данных.Я использовал jquery для копирования таблицы в четвертом квадранте во второй и третий квадрант перед синхронизацией полос прокрутки.Я использовал сочетание свойств CSS overflow, width, height и display, чтобы скрыть ненужные элементы TD в каждом из квадрантов.Вот полный рабочий пример: 

<html>
<head>
<style>
body {width:350px;}
.q1, .q2, .q3, .q4 {overflow:hidden; display:block; float:left;}
.q1 {width:50px; height: 30px;}
.q2 {width:300px; height: 30px;}
.q3 {width:50px; height: 100px;}
.q4 {width:300px; height: 100px; overflow:auto;}

.q2 .firstCol, .q3 thead, .q4 thead, .q4 .firstCol {display:none;}
.q2 td {background-color:#999;}
.q3 td {background-color:#999;}
.container {width:9999px;}

</style>

<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script>
$(document).ready(function(){
   $('.q4').bind('scroll', fnscroll);
   $('.q2').html($('.q4').html());
   $('.q3').html($('.q4').html());
});

function fnscroll(){

$('.q2').scrollLeft($('.q4').scrollLeft());
$('.q3').scrollTop($('.q4').scrollTop());


}

</script>
</head>


<body>
         <div class="q1"><div class="container"></div></div>
         <div class="q2"><div class="container"></div></div>
         <div class="q3"><div class="container"></div></div>
         <div class="q4">
            <div class="container">
            <table>
               <thead>
                  <tr>
                     <td class="firstCol"></td>
                     <td>Col</td>
                     <td>Col</td>
                     <td>Col</td>
                     <td>Col</td>
                     <td>Col</td>
                     <td>Col</td>
                     <td>Col</td>
                     <td>Col</td>
                  </tr>
               </thead>
               <tbody>
               <?php for($c=0; $c<50; $c++) { ?>
                  <tr>
                     <td class="firstCol">Row</td>
                     <td>this is some content</td>
                     <td>hello world!<br/>This is good</td>
                     <td>Row</td>
                     <td>adjfljaf oj eoaifj </td>
                     <td>ajsdlfja oije</td>
                     <td>alsdfjaoj f</td>
                     <td>jadfioj</td>
                     <td>jalsdjf oai</td>
                  </tr>
               <?php } ?>
               </tbody>
            </table>
            </div>
         </div>
</body>
</html>
1 голос
/ 24 декабря 2011

Вы визуализируете таблицу дважды:

  • После того, как содержится в прокручиваемом div вашего желаемого размера
  • Оказавшись в небольшом div, не прокручиваемом div (переполнение: скрытый), который расположен поверх другого, скрывая верхний ряд, но не полосу прокрутки
...