All geek questions in one place

Horizontal and vertical scroll table in Bootstrap

I am designing a table using adaptive bootstrap. So far, no less. columns, that was good. With a fixed header, everything worked fine.

JSFIDDLE VERTICAL CLIP

Now it took me more than 20 columns in the table, and it should also be able to scroll horizontally.

JSFIDDLE HORIZONTAL SCROLLBAR

I tried to get them to work together, for a fixed title table for vertical and horizontal scrolling with the ability to scroll the title.

I tried this:

.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>
Run codeHide result

I just added repeating rows so the table could scroll. How to make a table with the ability to scroll vertically (with a fixed title) and horizontally (with a scrollable title)?

+6
3

. ,

$('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>
Hide result

. jsFiddle, .

+2

.

:

#sailorTableArea{
    max-height: 300px;
    overflow-x: auto;
    overflow-y: auto;
}
#sailorTable{
    white-space: nowrap;
}

HTML:

<div class="table-responsive" id="sailorTableArea">
    <table id="sailorTable" class="table table-striped table-bordered" width="100%">
        <tr>...</tr>
    </table>
</div>
0

Source: https://habr.com/ru/post/1692363/

More articles:


All Articles