te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>javascript - Fixed table header with horizontal AND vertical scrolling body - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - Fixed table header with horizontal AND vertical scrolling body - Stack Overflow

    javascript - Fixed table header with horizontal AND vertical scrolling body - Stack Overflow

    programmeradmin2浏览0评论

    Objectives:

    • Column width of table header and table body should be same.
    • Table header to be fixed on vertical scroll.
    • Table header to be moved on horizontal scroll.
    • Header to be displayed inside scroll-able division of HTML.

    Problem statements:

    • Table header does not get fixed on vertical scroll.
    • Header displayed out of scroll-able division of HTML(When header position is fixed).

    I have seen many posts, but could not find the solution to this particular problem statement.

    I have created two JSFiddles to demonstrate the problem statements:

    Fiddle01: Solution works good as a separate module. JSFiddle01

    Fiddle02: Solution does not work when its integrated with other divs. JSFiddle02

    Any help would be very much appreciated.

    $(function() {
var $window = $(window);
var $table = $('table');
var $head = $table.find('thead');
var $body = $table.find('tbody');
var $headTds1 = $head.find('tr').eq(0).find('th');
var $headTds2 = $head.find('tr').eq(1).find('th');
var $bodyTds = $body.find('tr').eq(0).find('td');
var tableWidth = $table.outerWidth();
// console.log("Width:"+tableWidth);
var $tableNew = $('<table/>');
var cl = 0; // colspan total length
var cc = 0; // colspan count

$table.css({ width: tableWidth });
$tableNew
    .attr("class", $table.attr("class"))
    .css({ width: tableWidth });

$head.css({ background: '#fff' });

$.each($headTds1, function(index, value) {
    var $headTd = $(value);
    var colspan = $headTd.attr('colspan') || 0;

    if (colspan) {
        while (colspan) {
            addwidth($($headTds2[cl]), $($bodyTds[index + cl - cc]));
            colspan--
            cl++
        }
        cc++;
    } else {
        addwidth($headTd, $($bodyTds[index + cl - cc]));
    }
});

function addwidth($headTd, $bodyTd) {
    var headTdwidth2 = $headTd.outerWidth();
    var bodyTdwidth2 = $bodyTd.outerWidth();
    var width2 = headTdwidth2 > bodyTdwidth2 ? headTdwidth2 : bodyTdwidth2;

    $bodyTd.css({ 'width': width2 });
    $headTd.css({ 'width': width2 });

    var headTdwidth = $headTd.width();
    var bodyTdwidth = $bodyTd.width();
    var width = headTdwidth > bodyTdwidth ? headTdwidth : bodyTdwidth;
    $bodyTd.html('<div style="width: ' + width + 'px">' + $bodyTd.html() + '</div>');
    $headTd.html('<div style="width: ' + width + 'px">' + $headTd.html() + '</div>');
}

$head.appendTo($tableNew);
$tableNew.insertBefore($table);
// $table.css({ 'margin-top': $tableNew.height() });

$tableNew.css({ position: 'fixed' });

$window.scroll(reLeft);
$window.resize(reLeft);


function reLeft() {
    $tableNew.css({ left: $table.offset().left - $window.scrollLeft() });
}
});

    Objectives:

    • Column width of table header and table body should be same.
    • Table header to be fixed on vertical scroll.
    • Table header to be moved on horizontal scroll.
    • Header to be displayed inside scroll-able division of HTML.

    Problem statements:

    • Table header does not get fixed on vertical scroll.
    • Header displayed out of scroll-able division of HTML(When header position is fixed).

    I have seen many posts, but could not find the solution to this particular problem statement.

    I have created two JSFiddles to demonstrate the problem statements:

    Fiddle01: Solution works good as a separate module. JSFiddle01

    Fiddle02: Solution does not work when its integrated with other divs. JSFiddle02

    Any help would be very much appreciated.

    $(function() {
var $window = $(window);
var $table = $('table');
var $head = $table.find('thead');
var $body = $table.find('tbody');
var $headTds1 = $head.find('tr').eq(0).find('th');
var $headTds2 = $head.find('tr').eq(1).find('th');
var $bodyTds = $body.find('tr').eq(0).find('td');
var tableWidth = $table.outerWidth();
// console.log("Width:"+tableWidth);
var $tableNew = $('<table/>');
var cl = 0; // colspan total length
var cc = 0; // colspan count

$table.css({ width: tableWidth });
$tableNew
    .attr("class", $table.attr("class"))
    .css({ width: tableWidth });

$head.css({ background: '#fff' });

$.each($headTds1, function(index, value) {
    var $headTd = $(value);
    var colspan = $headTd.attr('colspan') || 0;

    if (colspan) {
        while (colspan) {
            addwidth($($headTds2[cl]), $($bodyTds[index + cl - cc]));
            colspan--
            cl++
        }
        cc++;
    } else {
        addwidth($headTd, $($bodyTds[index + cl - cc]));
    }
});

function addwidth($headTd, $bodyTd) {
    var headTdwidth2 = $headTd.outerWidth();
    var bodyTdwidth2 = $bodyTd.outerWidth();
    var width2 = headTdwidth2 > bodyTdwidth2 ? headTdwidth2 : bodyTdwidth2;

    $bodyTd.css({ 'width': width2 });
    $headTd.css({ 'width': width2 });

    var headTdwidth = $headTd.width();
    var bodyTdwidth = $bodyTd.width();
    var width = headTdwidth > bodyTdwidth ? headTdwidth : bodyTdwidth;
    $bodyTd.html('<div style="width: ' + width + 'px">' + $bodyTd.html() + '</div>');
    $headTd.html('<div style="width: ' + width + 'px">' + $headTd.html() + '</div>');
}

$head.appendTo($tableNew);
$tableNew.insertBefore($table);
// $table.css({ 'margin-top': $tableNew.height() });

$tableNew.css({ position: 'fixed' });

$window.scroll(reLeft);
$window.resize(reLeft);


function reLeft() {
    $tableNew.css({ left: $table.offset().left - $window.scrollLeft() });
}
});
    • javascript
    • jquery
    • html
    • css
    • twitter-bootstrap
    Share Improve this question edited Dec 26, 2018 at 8:39 Morshedul Arefin 1,53816 silver badges25 bronze badges asked Dec 15, 2018 at 12:36 WEshruthWEshruth 7773 gold badges16 silver badges32 bronze badges 7
    • try this library tableHeadFixer.js $("table").tableHeadFixer({ "head": true, "left": 4,"foot":true }); – Shahid Awan Commented Dec 16, 2018 at 2:32
    • @ShahidAwan, Have tried the library, it freezes columns, and does not freeze header, github./lai32290/TableHeadFixer, please refer my fiddles. – WEshruth Commented Dec 18, 2018 at 4:29
    • Someone please respond to my question with solutions. – WEshruth Commented Dec 19, 2018 at 9:35
    • @WEshruth I see your Fiddle01 works. Why didn't you use it? – Duannx Commented Dec 20, 2018 at 3:57
    • @Duannx Yes it works as separate , but it does not work when I integrate it, it won’t, jsfiddle/Lxz98htp/60 – WEshruth Commented Dec 20, 2018 at 6:56
     |  Show 2 more ments

    3 Answers 3

    Reset to default 5 +25

    You are cloning the table for fix header, better you can direct fix the header of original table which will results the same.

    Element with position:fixed changes the width with respect to viewport, which results width gets change on scrolling as you can check here https://jsfiddle/chourasiapawankumar/vg7q3tyc/19

    Approach:1

    instead of position:fixed use relative in th and it is working with your parent div which has min-height:100px.

    https://jsfiddle/chourasiapawankumar/krw0qpbL/62/

    Approach:2

    You can see both horizontal and vertical scroll bar at a time on removing min-height of parent div which I have mented in the below fiddle.

    https://jsfiddle/chourasiapawankumar/vg7q3tyc/33/

    Dunno if you can/want to use a library, but floatHead works nicely and it looks like it does what you want... Go on the linked page and click the Demo "Run FloatHead" button, you will see it in action.

    The most mon trick for scrollable tables is to create a clone of the table and display the <thead> from first clone and <tbody> from the second. This is done to ensure that both sections have identical structure and column widths. The following uses this idea + sticky positioning:

    $(function() {
  $(".fixed_headers").each(function() {
    $(this).wrap("<div class='scrollable-table'></div>");
    $(this).clone().insertBefore(this);
  });
});
    @import url(https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css);

.scrollable-table {
  overflow: auto;
  max-height: 250px;
}

.scrollable-table table:nth-child(1) {
  position: sticky;
  left: 0;
  top: 0;
  background-color: #fff;
  margin-bottom: 0;
}

.scrollable-table table:nth-child(1) tbody {
  visibility: collapse;
}

.scrollable-table table:nth-child(2) thead {
  visibility: collapse;
}
    <script src="https://cdnjs.cloudflare./ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<p style="text-align: center;">Best viewed in full page</p>
<div class="container">
  <table class="table table-condensed table-bordered table-hover fixed_headers">
    <thead>
      <tr>
        <th class="nb_custom_th">Store_Country</th>
        <th class="nb_custom_th">Brand</th>
        <th class="nb_custom_th">Product Description</th>
        <th class="nb_custom_th">12</th>
        <th class="nb_custom_th">df</th>
        <th class="nb_custom_th">trr</th>
        <th class="nb_custom_th">Tax onlatest periodofthe fiscal17</th>
        <th class="nb_custom_th">df1</th>
        <th class="nb_custom_th">121</th>
        <th class="nb_custom_th">4455tre4</th>
        <th class="nb_custom_th">4455tre41</th>
        <th class="nb_custom_th">4455tre42</th>
        <th class="nb_custom_th">4455tre43</th>
        <th class="nb_custom_th">4455tre431</th>
        <th class="nb_custom_th">4455tre433</th>
        <th class="nb_custom_th">4455tre434</th>
        <th class="nb_custom_th">4455tre435</th>
        <th class="nb_custom_th">4455tre436</th>
        <th class="nb_custom_th">4455tre437</th>
        <th class="nb_custom_th">4455tre438</th>
        <th class="nb_custom_th">4455tre439</th>
        <th class="nb_custom_th">4455tre4310</th>
        <th class="nb_custom_th">4455tre4311</th>
        <th class="nb_custom_th">4455tre4312</th>
        <th class="nb_custom_th">4455tre4313</th>
        <th class="nb_custom_th">4455tre4314</th>
        <th class="nb_custom_th">4455tre4315</th>
        <th class="nb_custom_th">4455tre4316</th>
        <th class="nb_custom_th">4455tre4317</th>
        <th class="nb_custom_th">4455tre43171</th>
        <th class="nb_custom_th">Tax on latest period of the fiscal15</th>
        <th class="nb_custom_th">Tax on latest period of the fiscal16</th>
        <th class="nb_custom_th">Taxon latest period ofthefiscal18</th>
        <th class="nb_custom_th">Taxon latest period ofthefiscal181</th>
      </tr>
    </thead>
    <tbody>
      <tr class="nb_custom_tr">
        <td class="nb_custom_td drillHandler">India</td>
        <td class="nb_custom_td drillHandler">Apple</td>
        <td class="nb_custom_td drillHandler">Apple iPad 4 16GB Wi-Fi + Cellular</td>
        <td class="nb_custom_td" style="text-align: right;">3520</td>
        <td class="nb_custom_td" style="text-align: right;">3520</td>
        <td class="nb_custom_td" style="text-align: right;">3520</td>
        <td class="nb_custom_td" style="text-align: right;">3520</td>
        <td class="nb_custom_td" style="text-align: right;">3520</td>
        <td class="nb_custom_td" style="text-align: right;">3520</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
        <td class="nb_custom_td" style="text-align: right;">6620</td>
      </tr>
      <tr class="nb_custom_tr">
        <td class="nb_custom_td drillHandler">India</td>
        <td class="nb_custom_td drillHandler">Apple</td>
        <td class="nb_custom_td drillHandler">Apple iPad Air</td>
        <td class="nb_custom_td" style="text-align: right;">1895</td>
        <td class="nb_custom_td" style="text-align: right;">1895</td>
        <td class="nb_custom_td" style="text-align: right;">1895</td>
        <td class="nb_custom_td" style="text-align: right;">1895</td>
        <td class="nb_custom_td" style="text-align: right;">1895</td>
        <td class="nb_custom_td" style="text-align: right;">1895</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
        <td class="nb_custom_td" style="text-align: right;">79875</td>
      </tr>
      <tr class="nb_custom_tr">
        <td class="nb_custom_td drillHandler">India</td>
        <td class="nb_custom_td drillHandler">Apple</td>
        <td class="nb_custom_td drillHandler">Apple iPad Mini</td>
        <td class="nb_custom_td" style="text-align: right;">2602</td>
        <td class="nb_custom_td" style="text-align: right;">2602</td>
        <td class="nb_custom_td" style="text-align: right;">2602</td>
        <td class="nb_custom_td" style="text-align: right;">2602</td>
        <td class="nb_custom_td" style="text-align: right;">2602</td>
        <td class="nb_custom_td" style="text-align: right;">2602</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
        <td class="nb_custom_td" style="text-align: right;">6245</td>
      </tr>
      <tr class="nb_custom_tr">
        <td class="nb_custom_td drillHandler">India</td>
        <td class="nb_custom_td drillHandler">Apple</td>
        <td class="nb_custom_td drillHandler">Apple IPhone 4S 64GB</td>
        <td class="nb_custom_td" style="text-align: right;">2963</td>
        <td class="nb_custom_td" style="text-align: right;">2963</td>
        <td class="nb_custom_td" style="text-align: right;">2963</td>
        <td class="nb_custom_td" style="text-align: right;">2963</td>
        <td class="nb_custom_td" style="text-align: right;">2963</td>
        <td class="nb_custom_td" style="text-align: right;">2963</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
        <td class="nb_custom_td" style="text-align: right;">2827</td>
      </tr>
    </tbody>
  </table>
</div>

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论