1. ホーム
  2. 質問と答え
  3. スクロールのブートストラップ固定ネストされたテーブルヘッダー

スクロールのブートストラップ固定ネストされたテーブルヘッダー

2017-06-19 20 views
2

このトピックへの他の提供されたソリューション（このソリューションのようなjQueryを避けたい：stackoverflow）が私のケースでは機能しないので、私は新しい質問を開きました。垂直のスクロールでテーブルの見出しを固定するにはどうすればよいですか？あなたは、CSS属性position: fixed;を使用することができスクロールのブートストラップ固定ネストされたテーブルヘッダー

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

。 テーブル<thead>インラインに追加しました。別のスタイルシートを使用する方が良いことを覚えておいてください。その次にはテーブルのヘッダーにスタイルを固定して、テーブル<tbody>に正しい方法で接続する必要があります。あなたが望むなら、私はあなたにそれを手伝っていきたいと思います。体が長すぎたのでJSfiddle

で

ルックiは別々JSfiddleでそれを入れていました。コードをコピー＆ペーストするだけです。

希望すると便利です。

出典

2017-06-22 12:42:44 Deathstorm

+0

これは、d4rty Iknow @横スクロール – d4rty

+0

と共に使用することはできません。より良いビューを作成し、スクロールを水平にできないようにするには、 '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コードを使用することもできます。

ここはpeとして動作するjsfiddleリンクです私が言ったように、R、要件、

https://jsfiddle.net/t0vek036/

出典

2017-06-22 13:03:42

+0

これはうまくいかない。なぜなら、 '頭の中の'と頭の間の関係が壊れてしまうからだ。 ここでは、あなたのフィドルhttps://ibb.co/fiucDQのスクリーンショットです –

関連する問題

 関連する問題