Bootstrap在滚动上固定嵌套表头

Question

由于针对此主题提供的其他解决方案（我也想避免使用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>

Answer 1

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