Question

我有以下脚本来冻结我的表格。这在屏幕的横向/纵向模式下工作正常，但当在横向模式下加载表格并旋转到纵向时，旧的clone(fixed header {fix_thead})具有相同的宽度。关于方向改变

jQuery(window).bind('orientationchange', function (e) {CheckInvTableFreeze ();}

我再次调用冻结标头功能以使用新表头调整冻结标头宽度。在再次改变方向时，出现多个冻结标题。如何根据原始表只有一个固定的表头。

var CheckInvTableFreeze = function myfunction() {
var CiTable = $('#myTable'),
 CiThead = CiTable.find('thead'),
 fix_thead;

CiThead.find('th').each(function () {
    var el = $(this);
    el.css('width', el.width());
});
fix_thead = CiThead.clone().hide();
CiThead.after(fix_thead);
fix_thead.css(
{
    'position': 'fixed',
    'top': 0,
    'width': CiThead.width()
});
$(document).on('scrollstart', function (e) {
    if ($(this).scrollTop() > $('#myTable').offset().top) {

        fix_thead.show();
    }
    else {

        fix_thead.hide();
    }
});

Answer 1

你可以试试这个

HTML 的

<div class="tableContainer">
      <header class="tableHeader">
        <table>
          <thead>
            <tr>
              <th>Aapple</th>
              <th>Bboy</th>
              <th>Ccat</th>
              <th>Ddog</th>
              <th>Eeagle</th>
              <th>Ffoxrot</th>
              <th>Ggoat</th>
            </tr>
          </thead>
        </table>
      </header>
      <div class="tableBody">
        <table>
          <tbody>
            <tr>
              <td>aaaaaaaaaaaaaaaaaaaaaaa</td>
              <td>b</td>
              <td>c</td>
              <td>d</td>
              <td>e</td>
              <td>f</td>
              <td>g</td>
            </tr>
            <tr>
              <td>a</td>
              <td>bbbbbbbbbbbbbbbbbbbbbbbbbbbb</td>
              <td>c</td>
              <td>d</td>
              <td>e</td>
              <td>f</td>
              <td>g</td>
            </tr>
            <tr>
              <td>a</td>
              <td>b</td>
              <td>cccccccccccc</td>
              <td>d</td>
              <td>e</td>
              <td>f</td>
              <td>g</td>
            </tr>
            <tr>
              <td>a</td>
              <td>b</td>
              <td>c</td>
              <td>dddddddddddddddddddddd</td>
              <td>e</td>
              <td>f</td>
              <td>g</td>
            </tr>
            <tr>
              <td>a</td>
              <td>b</td>
              <td>c</td>
              <td>d</td>
              <td>eeeeeeeee</td>
              <td>f</td>
              <td>g</td>
            </tr>
            <tr>
              <td>a</td>
              <td>b</td>
              <td>c</td>
              <td>d</td>
              <td>e</td>
              <td>ffffffffffffffffffffffffffffffffffffffffff</td>
              <td>g</td>
            </tr>
            <tr>
              <td>a</td>
              <td>b</td>
              <td>c</td>
              <td>d</td>
              <td>e</td>
              <td>f</td>
              <td>ggggggggggggggggggg</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

CSS

.tableContainer table {
              width: 100%;
              border-collapse: collapse;
              font-size:16px;
              font-family: verdana,arial,sans-serif;
            }
            .tableContainer table tr td{border-top-color:transparent!important;}
            .tableContainer table tr th,
            .tableContainer table tr td{
                min-width: 150px;
                min-height: 20px;
                height: 20px;
                padding: 10px;
                border: 1px solid #464e54; 
                word-break: break-all;
            }

            .tableHeader {
                width: 50%;
                overflow: hidden;
            }
            .tableBody {
                width: 50%;
                height: 200px;
                overflow: auto;
            }

JQUERY

$(function(){
    $(document).ready(function(){
        $('.tableBody').scroll(function(){
             $('.tableHeader table').css('margin-left', -    $('.tableBody').scrollLeft());
        });
    });
});

在jQuery中冻结表头

1 个答案: