Bootstrap 中的水平和垂直可滚动表格

Question

我正在使用引导程序设计一个表格，响应式表格。直到它少了没有。列，很好。使用固定的标题，它工作正常。

JSFIDDLE VERTICAL SCROLLBAR

现在，我需要表格中有超过 20 列，并且它也应该可以水平滚动。

JSFIDDLE HORIZONTAL SCROLLBAR

我试图让它们一起工作，用于垂直滚动的固定标题表和带有可滚动标题的水平滚动。

我试过了：

.table-fixed thead {
  width: 97%;
}

.table-fixed tbody {
  height: 150px;
  overflow-y: auto;
  width: 100%;
}

.table-fixed thead,
.table-fixed tbody,
.table-fixed tr,
.table-fixed td,
.table-fixed th {
  display: block;
}

.table-fixed tbody td,
.table-fixed thead>tr>th {
  float: left;
  border-bottom-width: 0;
}

.table-fixed thead {
  width: 97%;
}

.table-fixed tbody {
  height: 230px;
  overflow-y: auto;
  width: 100%;
}

.table-fixed thead,
.table-fixed tbody,
.table-fixed tr,
.table-fixed td,
.table-fixed th {
  display: block;
}

.table-fixed tbody td,
.table-fixed thead>tr>th {
  float: left;
  border-bottom-width: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="panel panel-default table-responsive">
      <table class="table table-fixed">
        <thead>
          <tr>
            <th class="col-xs-1">S.No.</th>
            <th class="col-xs-1">Name</th>
            <th class="col-xs-1">Balance</th>
            <th class="col-xs-1">Action</th>
            <th class="col-xs-1">S.No.</th>
            <th class="col-xs-1">Name</th>
            <th class="col-xs-1">Balance</th>
            <th class="col-xs-1">Action</th>
            <th class="col-xs-1">S.No.</th>
            <th class="col-xs-1">Name</th>
            <th class="col-xs-1">Balance</th>
            <th class="col-xs-1">Action</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
          </tr>
          <tr>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
          </tr>
          <tr>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
          </tr>
          <tr>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
          </tr>
          <tr>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
          </tr>
          <tr>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
          </tr>
          <tr>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
          </tr>
          <tr>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
            <td class="col-xs-1">1</td>
            <td class="col-xs-1">Mike Adams</td>
            <td class="col-xs-1">100000000000000</td>
            <td class="col-xs-1">ewed</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

我只是添加了重复的行以使表格可以滚动。 如何使表格可垂直滚动（带有固定标题）和水平滚动（带有可滚动标题）？

Answer 1

过了一会儿，我的查询得到了一个解决方案.. Solution to make table scroll-able vertically and horizontally and responsive

$('table').on('scroll', function() {
  $("#" + this.id + " > *").width($(this).width() + $(this).scrollLeft());
});

html {
  font-family: verdana;
  font-size: 10pt;
  line-height: 25px;
}

table {
  border-collapse: collapse;
  width: 300px;
  overflow-x: scroll;
  display: block;
}

thead {
  background-color: #EFEFEF;
}

thead,
tbody {
  display: block;
}

tbody {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 140px;
}

td,
th {
  min-width: 100px;
  height: 25px;
  border: dashed 1px lightblue;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-6">
      <div class="table-responsive">
        <table class="table" id="table1">
          <thead>
            <tr>
              <th>sadasdasdfasdfasfasfasfa#</th>
              <th>Firstname</th>
              <th>Lastname</th>
              <th>Age</th>
              <th>City</th>
              <th>Country</th>
              <th>#</th>
              <th>Firstname</th>
              <th>Lastname</th>
              <th>Age</th>
              <th>City</th>
              <th>Country</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="col-sm-6 col-md-6">
      <div class="table-responsive">
        <table class="table" id="table2">
          <thead>
            <tr>
              <th>sadasdasdfasdfasfasfasfa#</th>
              <th>Firstname</th>
              <th>Lastname</th>
              <th>Age</th>
              <th>City</th>
              <th>Country</th>
              <th>#</th>
              <th>Firstname</th>
              <th>Lastname</th>
              <th>Age</th>
              <th>City</th>
              <th>Country</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
            </tr>
            <tr>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
              <td>1</td>
              <td>Anna</td>
              <td>Pitt</td>
              <td>35</td>
              <td>New York</td>
              <td>USA</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

注意：转到 jsFiddle 可以更好地查看。