发表新帖
发表新帖

Frozen table header inside scrollable div

前端 未结
关注
11 2097
Happy的楠姐
Happy的楠姐 2020-11-30 04:15

I\'ve three divs. Header, central and footer. There is a table in central div (gridview) which is almost always longer than outer div. So I\'ve made this div scrollable vert

相关标签:
11条回答
  • -上瘾入骨i
    2020-11-30 05:05

    I've just put together a jQuery plugin that does exactly what you want. Its very small in size and really easy to implement.

    All that is required is a table that has a thead and tbody.

    You can wrap that table in a DIV with a classname and the table will always resize to fit in that div. so for example if your div scales with the browser window so will the table. The header will be fixed when scrolling. The footer will be fixed (if you enable a footer). You also have the option to clone the header in the footer and have it fixed. Also if you make your browser window too small and all columns can't fit...it will also scroll horizontally (header too).

    you just pass the DIV's classname to the plugin like so: $('.myDiv').fixedHeaderTable({footer: true, footerId: 'myFooterId'}); and the plugin will do the rest. FooterID is a element on the page that contains the mark-up for your footer. this is used if you want to have pagination as your footer.

    If you have multiple tables on the page it will also work for each table you want to have a fixed header.

    check it out here: http://fixedheadertable.mmalek.com/

    Keep in mind its still 'beta' so I am adding new features and bug fixes daily.

    Supported browsers: IE6, IE7, IE8, FireFox, Safari, and Chrome

    0 讨论(0)
  • 死守一世寂寞
    2020-11-30 05:07

    You would have to put the header outside the scrollable div. Everything within the div will scroll.

    EDIT

    Regarding the width if you go for a separate header, I can see a few solutions:

    • Assuming this is dynamic content, generate "fixed" widths based on the length of the string. Obviously specify in terms of EMs and leave some margin for error.
    • Use javascript.
    • Use fixed width columns.

    I haven't actually tried the first, and it might be overcomplicating things a bit. It's something to try if you're desperate for the effect though.

    I should also mention that there are probably javascript libraries with table widgets that do this already. Have a look at them to see how they do it.

    0 讨论(0)
  • 一向
    2020-11-30 05:10

    Here is a basic solution using javascript: 

    function position(table) {
    table.rows[0].style.position="absolute";
    table.rows[0].style.top="0px";
    table.style.marginTop = table.rows[0].clientHeight/1.2;
    var widths = Array();
    for(var i = 0; i < table.rows[0].cells.length; i++) {
        widths[i] = max(table.rows[0].cells[i].clientWidth, table.rows[1].cells[i].clientWidth);
    }
    for(var row = 0; row < table.rows.length; row++) {
        for(var col = 0; col < widths.length; col ++) {
            table.rows[row].cells[col].style.width = widths[col] + "px";
        }
    }
}

function max(num1, num2) { return (num1 > num2) ? num1 : num2; }
    0 讨论(0)
  • 太阳男子
    2020-11-30 05:11

    Solution is really simple. You need 3 DIVs: a general container (in my case of class "outer"), a table container (in my case of class "inner") and a DIV in which you make a clone of an existing table using jQuery or javaScript (in my case of class "header").

    Solution uses CSS and a few lines of jQuery code, which clones HTML of "inner" into "header" and sets its width and height. Supports fixed and variable columns width. Tested with IE8, Firefox 9, Safari and Google Chrome.

    Here is a sample code:

        	$(document).ready(function() {
    		$('.header').html( $('.inner').html() );
    		$('.header').css('width', $('.inner table').outerWidth() );
    		$('.header').css('height', $('.inner table thead').outerHeight() );
    	});
    table {
  width:100%;
}
th {
  border-top:1px solid #999;
  text-align:left;
}
td, th {
  border-bottom:1px solid #999;
  background-color:#EEE;
}
.outer {
  position:relative;
  width:500px;
}
.inner {
  height:150px;
  overflow:auto;
}
.header {
  position:absolute;
  top:0;
  left:0;
  overflow:hidden;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="outer">
  <div class="inner">
    <table cellspacing="0" cellpadding="0">
      <thead>
        <tr>
          <th>a</th>
          <th>b</th>
          <th>c</th>
          <th>d</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>1</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>2</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>3</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>4</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>5</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>6</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>7</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>8</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>9</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>10</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>11</td><td>b</td><td>c</td><td>d</td></tr>
        <tr><td>12</td><td>b</td><td>c</td><td>d</td></tr>
      </tbody>
    </table>
  </div>

  <div class="header">
  </div>

</div>
</body>

    0 讨论(0)
  • 盖世英雄少女心
    2020-11-30 05:14

    You need to put a table with the headers about your table of data. You can maintain the column width with table-layout:fixed. JavaScript can be used to match the column widths.

    0 讨论(0)
 看不清?
提交回复
热议问题