Bootstrap behoben verschachtelte Tabelle Header auf Bildlauf

Da andere bereitgestellten Lösungen (auch ich möchte jQuery wie diese Lösung zu vermeiden: stackoverflow) zu diesem Thema nicht für meinen Fall arbeiten, öffnete ich eine neue Frage. Wie kann ich den Tabellen-Header auf vertikalem Scroll fixieren?Bootstrap behoben verschachtelte Tabelle Header auf Bildlauf

<!-- 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>

Quelle

2017-06-19 d4rty

$(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>

Quelle

2017-06-22 13:01:22 Mixa

könnten Sie das Attribut CSS position: fixed;. Ich habe es in die Tabelle <thead> inline eingefügt. Denken Sie daran, es ist besser, ein separates Stylesheet zu verwenden. Daneben müssen Sie eine Stilfixierung über die Kopfzeile der Tabelle vornehmen, so dass sie korrekt mit der Tabelle <tbody> verbunden wird. Ich würde dir gerne dabei helfen, wenn du willst.

Blick auf den JSfiddle

Da der Körper zu lang war ich hatte es in einem separaten JSfiddle zu setzen. Kopieren Sie einfach den Code und fügen Sie ihn ein.

Hoffe, das hilft!

Quelle

2017-06-22 12:42:44 Deathstorm

Dies funktioniert nicht zusammen mit den horizontalen Bildlauf – d4rty

@ d4rty Iknow, wie ich gesagt habe. Sie müssen das 'CSS' anpassen, um eine bessere Ansicht zu erstellen und das Scrollen horizontal nicht möglich zu machen. Sie suchen nur nach einer Lösung 'CSS'. Deshalb habe ich diese Antwort gegeben – Deathstorm

Sie können Ihre Tabelle in einer vertikalen Bildlauf Textbereich mit folgenden Methoden setzen:

Methode 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>

Methode 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>

ich glaube Sie fragen über vertikales Scrollen des gesamten Tisches ...

Quelle

2017-06-22 12:56:50 Arun

Sie können es mit Hilfe von CSS erhalten selbst, können Sie die folgenden in Ihrem CSS hinzufügen,

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

Wenn Sie die Stile nicht wünschen geben thead und tbody, Sie können auch eine Klasse geben und dann können Sie den obigen css-code verwenden.

Hier ist der JSFiddle-Link, der als Pe funktioniert r Ihre Anforderung,

https://jsfiddle.net/t0vek036/

Quelle

2017-06-22 13:03:42

dies funktioniert nicht, da die Beziehung zwischen 'td' in 'Kopf' und 'td' in 'Körper' wird brechen. Hier ist der Screenshot Ihrer Geige https://ibb.co/fiucDQ –

Bootstrap behoben verschachtelte Tabelle Header auf Bildlauf

Antwort

Verwandte Themen