Bootstrap在滚动上修复了嵌套表头

时间:2017-06-19 12:11:29

标签: css twitter-bootstrap

由于其他提供的解决方案(我也希望避免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>

4 个答案:

答案 0 :(得分:5)

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

答案 1 :(得分:2)

你可以在css本身的帮助下获得它,你可以在你的CSS中添加以下内容,

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

如果您不希望将样式提供给theadtbody,您还可以为其提供课程,然后您可以使用上述css代码..

以下是根据您的要求运作的jsfiddle链接

https://jsfiddle.net/t0vek036/

答案 2 :(得分:1)

您可以使用CSS属性position: fixed;。 我将其添加到内联表<thead>中。请记住,最好使用单独的样式表。接下来,您必须对表的标题进行一些样式修复,以便以正确的方式连接到表<tbody>。如果你愿意,我想帮助你。

查看JSfiddle

由于身体太长,我不得不把它放在一个单独的JSfiddle中。只需复制并粘贴代码即可。

希望这有帮助!

答案 3 :(得分: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>

我相信你在问整个桌子的垂直滚动......