Scrollable HTML Table with fixed header and fixed

2019-06-21 08:30发布

站内问答 / 前沿技术
1346 3 6

I would like to create a table with scrollable data. I have to freeze the first row and first column of the table. The first row and first column of the table must automatically resize in width and height to the variable cell dimensions in the content area of the table (because the user will be adding new table cells with variable amount of content).

Someone asked a related question: How can I lock the first row and first column of a table when scrolling, possibly using JavaScript and CSS?

But the link to online demo and source code is dead, so I am unable to confirm the solution.

3条回答
Lonely孤独者°
2楼-- · 2019-06-21 08:57

Use the excellent jQuery Datables with the FixedHeader extension.

Scroll down past the header row, and you'll see it glue itself neatly to the top of your screen.

For header, footer, left and right excitement:

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

查看更多
0人赞 添加讨论(0) 举报
神经病院院长
3楼-- · 2019-06-21 09:00

Ok, I read a lot of answers on the web and finally assembled a demo that worked. I'm using PHP to create 50 rows in the table, but you can just as easily hard code the data. I essentially created four quadrants (div.q1, div.q2, div.q3 and div.q4), where the fourth quadrant contains the actual data table. I used jquery to copy the table in the fourth quadrant into the second and third quadrant before synchronizing their scroll bars. I used a combination of CSS overflow, width, height and display properties to hide unnecessary TD elements in each of the quadrants. Here's a full working example:

<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>
查看更多
0人赞 添加讨论(0) 举报
唯我独甜
4楼-- · 2019-06-21 09:13

You render the table twice:

  • Once contained in a scrollable div of your desired size
  • Once in a small div, non scrollable div (overflow:hidden), that is positioned over the top of the other one, hiding it's top row but not the scroll bar
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)