1. 首頁
  2. 問答
  3. 引導固定在滾動上的嵌套表頭

引導固定在滾動上的嵌套表頭

2017-06-19 65 views
2

由於其他提供的解決方案（也是我想避免jQuery這樣的解決方案：stackoverflow）對這個主題不起作用，我打開了一個新問題。我怎樣才能使表頭固定在垂直滾動？引導固定在滾動上的嵌套表頭

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class=container> 
 
    <div class=row> 
 
    <div class=col-sm-12> 
 
     <div class="table-responsive"> 
 
     <table class="table table-condensed table-bordered table-hover fixed_headers"> 
 
      <thead> 
 
      <tr> 
 
       <th rowspan="2" style="width: 10px"><span class="text-muted">#</span></th> 
 
       <th rowspan="2">ID</th> 
 
       <th rowspan="2">Name</th> 
 
       <th colspan="4">r 1</th> 
 
       <th colspan="4">r 2</th> 
 
       <th rowspan="2" ng-click="sortTableBy('recognized')" class="change-sort-order">ERK 
 
       </th> 
 
       <th rowspan="2">ERW 
 
       </th> 
 
       <th rowspan="2"><span class="text-muted">Radar</span></th> 
 
       <th rowspan="2"><span class="text-muted">RISS</span></th> 
 
      </tr> 
 
      <tr> 
 
       <th> 
 
       A 1 
 
       </th> 
 
       <th> 
 
       A 2 
 
       </th> 
 
       <th> 
 
       A 3 
 
       </th> 
 
       <th> 
 
       A 4 
 
       </th> 
 
       <th> 
 
       A 1 
 
       </th> 
 
       <th> 
 
       A 2 
 
       </th> 
 
       <th> 
 
       A 3 
 
       </th> 
 
       <th> 
 
       A 4 
 
       </th> 
 
      </tr> 
 
      </thead> 
 
      <tbody> 
 
      <tr> 
 
       <td><span class="text-muted">1</span></td> 
 
       <td>ididid</td> 
 
       <td>name</td> 
 
       <td> 
 
       aaa 
 
       </td> 
 
       <td> 
 
       bbb 
 
       </td> 
 
       <td> 
 
       ccc 
 
       </td> 
 
       <td> 
 
       ddd 
 
       </td> 
 

 
       <td> 
 
       ee </td> 
 
       <td> 
 
       ffubfhiuwefuh 
 
       </td> 
 
       <td> 
 
       dd 
 
       </td> 
 
       <td> 
 
       gg </td> 
 
       <td>gg 
 
       </td> 
 
       <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center"> 
 
       </td> 
 
       <td> 
 
       <button type="button" class="btn btn-default btn-xs center-block">Show 
 
            </button> 
 
       </td> 
 
       <td> 
 

 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td><span class="text-muted">1</span></td> 
 
       <td>ididid</td> 
 
       <td>name</td> 
 
       <td> 
 
       aaa 
 
       </td> 
 
       <td> 
 
       bbb 
 
       </td> 
 
       <td> 
 
       ccc 
 
       </td> 
 
       <td> 
 
       ddd 
 
       </td> 
 

 
       <td> 
 
       ee </td> 
 
       <td> 
 
       ff 
 
       </td> 
 
       <td> 
 
       dd 
 
       </td> 
 
       <td> 
 
       gg </td> 
 
       <td>gg 
 
       </td> 
 
       <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center"> 
 
       </td> 
 
       <td> 
 
       <button type="button" class="btn btn-default btn-xs center-block">Show 
 
            </button> 
 
       </td> 
 
       <td> 
 

 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td><span class="text-muted">1</span></td> 
 
       <td>ididid</td> 
 
       <td>name</td> 
 
       <td> 
 
       aaa 
 
       </td> 
 
       <td> 
 
       bbb 
 
       </td> 
 
       <td> 
 
       ccc 
 
       </td> 
 
       <td> 
 
       ddd 
 
       </td> 
 

 
       <td> 
 
       ee </td> 
 
       <td> 
 
       ff 
 
       </td> 
 
       <td> 
 
       dd 
 
       </td> 
 
       <td> 
 
       gg </td> 
 
       <td>gg 
 
       </td> 
 
       <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center"> 
 
       </td> 
 
       <td> 
 
       <button type="button" class="btn btn-default btn-xs center-block">Show 
 
            </button> 
 
       </td> 
 
       <td> 
 

 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td><span class="text-muted">1</span></td> 
 
       <td>ididid</td> 
 
       <td>name</td> 
 
       <td> 
 
       aaa 
 
       </td> 
 
       <td> 
 
       bbbjiodeijoew 
 
       </td> 
 
       <td> 
 
       ccc 
 
       </td> 
 
       <td> 
 
       ddd 
 
       </td> 
 

 
       <td> 
 
       ee </td> 
 
       <td> 
 
       ff 
 
       </td> 
 
       <td> 
 
       dd 
 
       </td> 
 
       <td> 
 
       gg </td> 
 
       <td>gg 
 
       </td> 
 
       <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center"> 
 
       </td> 
 
       <td> 
 
       <button type="button" class="btn btn-default btn-xs center-block">Show 
 
            </button> 
 
       </td> 
 
       <td> 
 

 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td><span class="text-muted">1</span></td> 
 
       <td>ididid</td> 
 
       <td>name</td> 
 
       <td> 
 
       aaa 
 
       </td> 
 
       <td> 
 
       bbb 
 
       </td> 
 
       <td> 
 
       ccc 
 
       </td> 
 
       <td> 
 
       ddd 
 
       </td> 
 

 
       <td> 
 
       ee </td> 
 
       <td> 
 
       ff 
 
       </td> 
 
       <td> 
 
       dd 
 
       </td> 
 
       <td> 
 
       gg </td> 
 
       <td>gg 
 
       </td> 
 
       <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center"> 
 
       </td> 
 
       <td> 
 
       <button type="button" class="btn btn-default btn-xs center-block">Show 
 
            </button> 
 
       </td> 
 
       <td> 
 

 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td><span class="text-muted">1</span></td> 
 
       <td>ididid</td> 
 
       <td>name</td> 
 
       <td> 
 
       aaa 
 
       </td> 
 
       <td> 
 
       bbb 
 
       </td> 
 
       <td> 
 
       ccc 
 
       </td> 
 
       <td> 
 
       ddd 
 
       </td> 
 

 
       <td> 
 
       ee </td> 
 
       <td> 
 
       ff 
 
       </td> 
 
       <td> 
 
       dd 
 
       </td> 
 
       <td> 
 
       gg </td> 
 
       <td>gg 
 
       </td> 
 
       <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center"> 
 
       </td> 
 
       <td> 
 
       <button type="button" class="btn btn-default btn-xs center-block">Show 
 
            </button> 
 
       </td> 
 
       <td> 
 

 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td><span class="text-muted">1</span></td> 
 
       <td>ididid</td> 
 
       <td>name</td> 
 
       <td> 
 
       aaa 
 
       </td> 
 
       <td> 
 
       bbb 
 
       </td> 
 
       <td> 
 
       ccc 
 
       </td> 
 
       <td> 
 
       ddd 
 
       </td> 
 

 
       <td> 
 
       ee </td> 
 
       <td> 
 
       ff 
 
       </td> 
 
       <td> 
 
       dd 
 
       </td> 
 
       <td> 
 
       gg </td> 
 
       <td>gg 
 
       </td> 
 
       <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center"> 
 
       </td> 
 
       <td> 
 
       <button type="button" class="btn btn-default btn-xs center-block">Show 
 
            </button> 
 
       </td> 
 
       <td> 
 

 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td><span class="text-muted">1</span></td> 
 
       <td>ididid</td> 
 
       <td>name</td> 
 
       <td> 
 
       aaa 
 
       </td> 
 
       <td> 
 
       bbb 
 
       </td> 
 
       <td> 
 
       ccc 
 
       </td> 
 
       <td> 
 
       ddd 
 
       </td> 
 

 
       <td> 
 
       ee </td> 
 
       <td> 
 
       ff 
 
       </td> 
 
       <td> 
 
       dd 
 
       </td> 
 
       <td> 
 
       gg </td> 
 
       <td>gg 
 
       </td> 
 
       <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center"> 
 
       </td> 
 
       <td> 
 
       <button type="button" class="btn btn-default btn-xs center-block">Show 
 
            </button> 
 
       </td> 
 
       <td> 
 

 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td><span class="text-muted">1</span></td> 
 
       <td>ididid</td> 
 
       <td>name</td> 
 
       <td> 
 
       aaa 
 
       </td> 
 
       <td> 
 
       bbb 
 
       </td> 
 
       <td> 
 
       ccc 
 
       </td> 
 
       <td> 
 
       ddd 
 
       </td> 
 

 
       <td> 
 
       ee </td> 
 
       <td> 
 
       ff 
 
       </td> 
 
       <td> 
 
       dd 
 
       </td> 
 
       <td> 
 
       gg </td> 
 
       <td>gg 
 
       </td> 
 
       <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center"> 
 
       </td> 
 
       <td> 
 
       <button type="button" class="btn btn-default btn-xs center-block">Show 
 
            </button> 
 
       </td> 
 
       <td> 
 

 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td><span class="text-muted">1</span></td> 
 
       <td>ididid</td> 
 
       <td>name</td> 
 
       <td> 
 
       aaa 
 
       </td> 
 
       <td> 
 
       bbb 
 
       </td> 
 
       <td> 
 
       ccc 
 
       </td> 
 
       <td> 
 
       ddd 
 
       </td> 
 

 
       <td> 
 
       ee </td> 
 
       <td> 
 
       ff 
 
       </td> 
 
       <td> 
 
       dd 
 
       </td> 
 
       <td> 
 
       gg </td> 
 
       <td>gg 
 
       </td> 
 
       <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center"> 
 
       </td> 
 
       <td> 
 
       <button type="button" class="btn btn-default btn-xs center-block">Show 
 
            </button> 
 
       </td> 
 
       <td> 
 

 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td><span class="text-muted">1</span></td> 
 
       <td>ididid</td> 
 
       <td>name</td> 
 
       <td> 
 
       aaa 
 
       </td> 
 
       <td> 
 
       bbb 
 
       </td> 
 
       <td> 
 
       ccc 
 
       </td> 
 
       <td> 
 
       ddd 
 
       </td> 
 

 
       <td> 
 
       ee </td> 
 
       <td> 
 
       ff 
 
       </td> 
 
       <td> 
 
       dd 
 
       </td> 
 
       <td> 
 
       gg </td> 
 
       <td>gg 
 
       </td> 
 
       <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center"> 
 
       </td> 
 
       <td> 
 
       <button type="button" class="btn btn-default btn-xs center-block">Show 
 
            </button> 
 
       </td> 
 
       <td> 
 

 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td><span class="text-muted">1</span></td> 
 
       <td>ididid</td> 
 
       <td>name</td> 
 
       <td> 
 
       aaa 
 
       </td> 
 
       <td> 
 
       bbb 
 
       </td> 
 
       <td> 
 
       ccc 
 
       </td> 
 
       <td> 
 
       ddd 
 
       </td> 
 

 
       <td> 
 
       ee </td> 
 
       <td> 
 
       ff 
 
       </td> 
 
       <td> 
 
       dd 
 
       </td> 
 
       <td> 
 
       gg </td> 
 
       <td>gg 
 
       </td> 
 
       <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center"> 
 
       </td> 
 
       <td> 
 
       <button type="button" class="btn btn-default btn-xs center-block">Show 
 
            </button> 
 
       </td> 
 
       <td> 
 

 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td><span class="text-muted">1</span></td> 
 
       <td>ididid</td> 
 
       <td>name</td> 
 
       <td> 
 
       aaa 
 
       </td> 
 
       <td> 
 
       bbb 
 
       </td> 
 
       <td> 
 
       ccc 
 
       </td> 
 
       <td> 
 
       ddd 
 
       </td> 
 

 
       <td> 
 
       ee </td> 
 
       <td> 
 
       ff 
 
       </td> 
 
       <td> 
 
       dd 
 
       </td> 
 
       <td> 
 
       gg </td> 
 
       <td>gg 
 
       </td> 
 
       <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center"> 
 
       </td> 
 
       <td> 
 
       <button type="button" class="btn btn-default btn-xs center-block">Show 
 
            </button> 
 
       </td> 
 
       <td> 
 

 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td><span class="text-muted">100</span></td> 
 
       <td>ididid</td> 
 
       <td>name</td> 
 
       <td> 
 
       aaa 
 
       </td> 
 
       <td> 
 
       bbb 
 
       </td> 
 
       <td> 
 
       ccc 
 
       </td> 
 
       <td> 
 
       ddd 
 
       </td> 
 

 
       <td> 
 
       ee </td> 
 
       <td> 
 
       ff 
 
       </td> 
 
       <td> 
 
       dd 
 
       </td> 
 
       <td> 
 
       gg </td> 
 
       <td>gg 
 
       </td> 
 
       <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center"> 
 
       </td> 
 
       <td> 
 
       <button type="button" class="btn btn-default btn-xs center-block">Show 
 
            </button> 
 
       </td> 
 
       <td> 
 

 
       </td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-06-19 d4rty

回答

4 

$(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(); 
 
    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()}); 
 
    } 
 
});
body{ 
 
    overflow-x: auto; 
 
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <table class="table table-condensed table-bordered table-hover fixed_headers"> 
 
     <thead> 
 
     <tr> 
 
      <th rowspan="2" style="width: 10px"><span class="text-muted">#</span></th> 
 
      <th rowspan="2">ID</th> 
 
      <th rowspan="2">Name</th> 
 
      <th colspan="4">r 1</th> 
 
      <th colspan="4">r 2</th> 
 
      <th rowspan="2" ng-click="sortTableBy('recognized')" class="change-sort-order">ERK 
 
      </th> 
 
      <th rowspan="2">ERW 
 
      </th> 
 
      <th rowspan="2"><span class="text-muted">Radar</span></th> 
 
      <th rowspan="2"><span class="text-muted">RISS</span></th> 
 
     </tr> 
 
     <tr> 
 
      <th> 
 
       A 1 
 
      </th> 
 
      <th> 
 
       A 2 
 
      </th> 
 
      <th> 
 
       A 3 
 
      </th> 
 
      <th> 
 
       A 4 
 
      </th> 
 
      <th> 
 
       A 1 
 
      </th> 
 
      <th> 
 
       A 2 
 
      </th> 
 
      <th> 
 
       A 3 
 
      </th> 
 
      <th> 
 
       A 4 
 
      </th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td><span class="text-muted">1</span></td> 
 
      <td>ididid</td> 
 
      <td>name</td> 
 
      <td> 
 
       aaa 
 
      </td> 
 
      <td> 
 
       bbb 
 
      </td> 
 
      <td> 
 
       ccc 
 
      </td> 
 
      <td> 
 
       ddd 
 
      </td> 
 

 
      <td> 
 
       ee 
 
      </td> 
 
      <td> 
 
       ffubfhiuwefuh 
 
      </td> 
 
      <td> 
 
       dd 
 
      </td> 
 
      <td> 
 
       gg 
 
      </td> 
 
      <td>gg 
 
      </td> 
 
      <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center"> 
 
      </td> 
 
      <td> 
 
       <button type="button" class="btn btn-default btn-xs center-block">Show 
 
       </button> 
 
      </td> 
 
      <td> 
 

 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td><span class="text-muted">1</span></td> 
 
      <td>ididid</td> 
 
      <td>name</td> 
 
      <td> 
 
       aaa 
 
      </td> 
 
      <td> 
 
       bbb 
 
      </td> 
 
      <td> 
 
       ccc 
 
      </td> 
 
      <td> 
 
       ddd 
 
      </td> 
 

 
      <td> 
 
       ee 
 
      </td> 
 
      <td> 
 
       ff 
 
      </td> 
 
      <td> 
 
       dd 
 
      </td> 
 
      <td> 
 
       gg 
 
      </td> 
 
      <td>gg 
 
      </td> 
 
      <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center"> 
 
      </td> 
 
      <td> 
 
       <button type="button" class="btn btn-default btn-xs center-block">Show 
 
       </button> 
 
      </td> 
 
      <td> 
 

 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td><span class="text-muted">1</span></td> 
 
      <td>ididid</td> 
 
      <td>name</td> 
 
      <td> 
 
       aaa 
 
      </td> 
 
      <td> 
 
       bbb 
 
      </td> 
 
      <td> 
 
       ccc 
 
      </td> 
 
      <td> 
 
       ddd 
 
      </td> 
 

 
      <td> 
 
       ee 
 
      </td> 
 
      <td> 
 
       ff 
 
      </td> 
 
      <td> 
 
       dd 
 
      </td> 
 
      <td> 
 
       gg 
 
      </td> 
 
      <td>gg 
 
      </td> 
 
      <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center"> 
 
      </td> 
 
      <td> 
 
       <button type="button" class="btn btn-default btn-xs center-block">Show 
 
       </button> 
 
      </td> 
 
      <td> 
 

 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td><span class="text-muted">1</span></td> 
 
      <td>ididid</td> 
 
      <td>name</td> 
 
      <td> 
 
       aaa 
 
      </td> 
 
      <td> 
 
       bbbjiodeijoew 
 
      </td> 
 
      <td> 
 
       ccc 
 
      </td> 
 
      <td> 
 
       ddd 
 
      </td> 
 

 
      <td> 
 
       ee 
 
      </td> 
 
      <td> 
 
       ff 
 
      </td> 
 
      <td> 
 
       dd 
 
      </td> 
 
      <td> 
 
       gg 
 
      </td> 
 
      <td>gg 
 
      </td> 
 
      <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center"> 
 
      </td> 
 
      <td> 
 
       <button type="button" class="btn btn-default btn-xs center-block">Show 
 
       </button> 
 
      </td> 
 
      <td> 
 

 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td><span class="text-muted">1</span></td> 
 
      <td>ididid</td> 
 
      <td>name</td> 
 
      <td> 
 
       aaa 
 
      </td> 
 
      <td> 
 
       bbb 
 
      </td> 
 
      <td> 
 
       ccc 
 
      </td> 
 
      <td> 
 
       ddd 
 
      </td> 
 

 
      <td> 
 
       ee 
 
      </td> 
 
      <td> 
 
       ff 
 
      </td> 
 
      <td> 
 
       dd 
 
      </td> 
 
      <td> 
 
       gg 
 
      </td> 
 
      <td>gg 
 
      </td> 
 
      <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center"> 
 
      </td> 
 
      <td> 
 
       <button type="button" class="btn btn-default btn-xs center-block">Show 
 
       </button> 
 
      </td> 
 
      <td> 
 

 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td><span class="text-muted">1</span></td> 
 
      <td>ididid</td> 
 
      <td>name</td> 
 
      <td> 
 
       aaa 
 
      </td> 
 
      <td> 
 
       bbb 
 
      </td> 
 
      <td> 
 
       ccc 
 
      </td> 
 
      <td> 
 
       ddd 
 
      </td> 
 

 
      <td> 
 
       ee 
 
      </td> 
 
      <td> 
 
       ff 
 
      </td> 
 
      <td> 
 
       dd 
 
      </td> 
 
      <td> 
 
       gg 
 
      </td> 
 
      <td>gg 
 
      </td> 
 
      <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center"> 
 
      </td> 
 
      <td> 
 
       <button type="button" class="btn btn-default btn-xs center-block">Show 
 
       </button> 
 
      </td> 
 
      <td> 
 

 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td><span class="text-muted">1</span></td> 
 
      <td>ididid</td> 
 
      <td>name</td> 
 
      <td> 
 
       aaa 
 
      </td> 
 
      <td> 
 
       bbb 
 
      </td> 
 
      <td> 
 
       ccc 
 
      </td> 
 
      <td> 
 
       ddd 
 
      </td> 
 

 
      <td> 
 
       ee 
 
      </td> 
 
      <td> 
 
       ff 
 
      </td> 
 
      <td> 
 
       dd 
 
      </td> 
 
      <td> 
 
       gg 
 
      </td> 
 
      <td>gg 
 
      </td> 
 
      <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center"> 
 
      </td> 
 
      <td> 
 
       <button type="button" class="btn btn-default btn-xs center-block">Show 
 
       </button> 
 
      </td> 
 
      <td> 
 

 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td><span class="text-muted">1</span></td> 
 
      <td>ididid</td> 
 
      <td>name</td> 
 
      <td> 
 
       aaa 
 
      </td> 
 
      <td> 
 
       bbb 
 
      </td> 
 
      <td> 
 
       ccc 
 
      </td> 
 
      <td> 
 
       ddd 
 
      </td> 
 

 
      <td> 
 
       ee 
 
      </td> 
 
      <td> 
 
       ff 
 
      </td> 
 
      <td> 
 
       dd 
 
      </td> 
 
      <td> 
 
       gg 
 
      </td> 
 
      <td>gg 
 
      </td> 
 
      <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center"> 
 
      </td> 
 
      <td> 
 
       <button type="button" class="btn btn-default btn-xs center-block">Show 
 
       </button> 
 
      </td> 
 
      <td> 
 

 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td><span class="text-muted">1</span></td> 
 
      <td>ididid</td> 
 
      <td>name</td> 
 
      <td> 
 
       aaa 
 
      </td> 
 
      <td> 
 
       bbb 
 
      </td> 
 
      <td> 
 
       ccc 
 
      </td> 
 
      <td> 
 
       ddd 
 
      </td> 
 

 
      <td> 
 
       ee 
 
      </td> 
 
      <td> 
 
       ff 
 
      </td> 
 
      <td> 
 
       dd 
 
      </td> 
 
      <td> 
 
       gg 
 
      </td> 
 
      <td>gg 
 
      </td> 
 
      <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center"> 
 
      </td> 
 
      <td> 
 
       <button type="button" class="btn btn-default btn-xs center-block">Show 
 
       </button> 
 
      </td> 
 
      <td> 
 

 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td><span class="text-muted">1</span></td> 
 
      <td>ididid</td> 
 
      <td>name</td> 
 
      <td> 
 
       aaa 
 
      </td> 
 
      <td> 
 
       bbb 
 
      </td> 
 
      <td> 
 
       ccc 
 
      </td> 
 
      <td> 
 
       ddd 
 
      </td> 
 

 
      <td> 
 
       ee 
 
      </td> 
 
      <td> 
 
       ff 
 
      </td> 
 
      <td> 
 
       dd 
 
      </td> 
 
      <td> 
 
       gg 
 
      </td> 
 
      <td>gg 
 
      </td> 
 
      <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center"> 
 
      </td> 
 
      <td> 
 
       <button type="button" class="btn btn-default btn-xs center-block">Show 
 
       </button> 
 
      </td> 
 
      <td> 
 

 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td><span class="text-muted">1</span></td> 
 
      <td>ididid</td> 
 
      <td>name</td> 
 
      <td> 
 
       aaa 
 
      </td> 
 
      <td> 
 
       bbb 
 
      </td> 
 
      <td> 
 
       ccc 
 
      </td> 
 
      <td> 
 
       ddd 
 
      </td> 
 

 
      <td> 
 
       ee 
 
      </td> 
 
      <td> 
 
       ff 
 
      </td> 
 
      <td> 
 
       dd 
 
      </td> 
 
      <td> 
 
       gg 
 
      </td> 
 
      <td>gg 
 
      </td> 
 
      <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center"> 
 
      </td> 
 
      <td> 
 
       <button type="button" class="btn btn-default btn-xs center-block">Show 
 
       </button> 
 
      </td> 
 
      <td> 
 

 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td><span class="text-muted">1</span></td> 
 
      <td>ididid</td> 
 
      <td>name</td> 
 
      <td> 
 
       aaa 
 
      </td> 
 
      <td> 
 
       bbb 
 
      </td> 
 
      <td> 
 
       ccc 
 
      </td> 
 
      <td> 
 
       ddd 
 
      </td> 
 

 
      <td> 
 
       ee 
 
      </td> 
 
      <td> 
 
       ff 
 
      </td> 
 
      <td> 
 
       dd 
 
      </td> 
 
      <td> 
 
       gg 
 
      </td> 
 
      <td>gg 
 
      </td> 
 
      <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center"> 
 
      </td> 
 
      <td> 
 
       <button type="button" class="btn btn-default btn-xs center-block">Show 
 
       </button> 
 
      </td> 
 
      <td> 
 

 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td><span class="text-muted">1</span></td> 
 
      <td>ididid</td> 
 
      <td>name</td> 
 
      <td> 
 
       aaa 
 
      </td> 
 
      <td> 
 
       bbb 
 
      </td> 
 
      <td> 
 
       ccc 
 
      </td> 
 
      <td> 
 
       ddd 
 
      </td> 
 

 
      <td> 
 
       ee 
 
      </td> 
 
      <td> 
 
       ff 
 
      </td> 
 
      <td> 
 
       dd 
 
      </td> 
 
      <td> 
 
       gg 
 
      </td> 
 
      <td>gg 
 
      </td> 
 
      <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center"> 
 
      </td> 
 
      <td> 
 
       <button type="button" class="btn btn-default btn-xs center-block">Show 
 
       </button> 
 
      </td> 
 
      <td> 
 

 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td><span class="text-muted">100</span></td> 
 
      <td>ididid</td> 
 
      <td>name</td> 
 
      <td> 
 
       aaa 
 
      </td> 
 
      <td> 
 
       bbb 
 
      </td> 
 
      <td> 
 
       ccc 
 
      </td> 
 
      <td> 
 
       ddd 
 
      </td> 
 

 
      <td> 
 
       ee 
 
      </td> 
 
      <td> 
 
       ff 
 
      </td> 
 
      <td> 
 
       dd 
 
      </td> 
 
      <td> 
 
       gg 
 
      </td> 
 
      <td>gg 
 
      </td> 
 
      <td ng-class="{'success': x.expected, 'danger':!x.expected}" class="success text-center"> 
 
      </td> 
 
      <td> 
 
       <button type="button" class="btn btn-default btn-xs center-block">Show 
 
       </button> 
 
      </td> 
 
      <td> 
 

 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
</div>

來源

2017-06-22 13:01:22 Mixa

1

你可以使用CSS屬性position: fixed;。 我將它添加到內嵌的表<thead>。請記住，最好使用單獨的樣式表。除此之外，您必須對錶格的標題進行一些修改，以便以正確的方式連接到表<tbody>。如果您願意，我想幫助您。

看那JSfiddle

由於身體太長，我不得不把它放在一個單獨的jsfiddle。只需複製並粘貼代碼即可。

希望這會有所幫助！

來源

2017-06-22 12:42:44 Deathstorm

+0

這並不連同水平滾動 – d4rty

+0

@ d4rty Iknow工作，因爲我已經告訴。您必須調整'CSS'才能創建更好的視圖，並且不可能使水平滾動成爲可能。你只需要尋找一個'CSS'的解決方案。所以這就是爲什麼我給了這個答案 – Deathstorm

0

您可以通過下面的方法把你的表中垂直滾動文本區域：

方法1

<style> 
.divScroll{ 
      white-space: nowrap; 
      overflow-y: scroll; 
      font-size:14px; 
      height:200px; 
      width:auto; 
      background-color:#bdbdbd; 
     } 
</style> 
<div class="divScroll"> 
"INSERT TABLE HERE" 
</div>

方法2

<div style="border: 1px solid black; overflow-y: auto; white-space: nowrap; height: 200px; width: auto; color: black; background-color: white;"> 
"INSERT TABLE HERE" 
</div>

我相信你是問關於整個桌面的垂直滾動...

來源

2017-06-22 12:56:50 Arun

2

您可以用CSS本身的幫助下得到它，你可以添加以下在你的CSS，

thead { 
    display: table; 
    width: calc(100% - 1em); 
    table-layout: fixed; 
} 
tbody { 
    display: block; 
    height: 240px; 
    overflow: auto; 
}

如果你不想給樣式thead和tbody，你也可以給一個類，然後你可以用上面的CSS代碼..

這裏是的jsfiddle鏈接的作品爲PE [R您的要求，

https://jsfiddle.net/t0vek036/

來源

2017-06-22 13:03:42

+0

這是行不通的，因爲'thead'中的'td'與'tbody'中的'td'之間的關係將會中斷。 下面是你的小提琴的截圖https://ibb.co/fiucDQ – 2017-06-22 13:22:04

相關問題

 相關問題