it-swarm.com.de

Horizontale und vertikale rollbare Tabelle in Bootstrap

Ich entwerfe einen Tisch mit Bootstrap, responsive. Bis es weniger hat. von Säulen war es gut. Mit festem Header funktionierte es einwandfrei.

JSFIDDLE VERTICAL SCROLLBAR

Nun brauchte ich mehr als 20 Spalten in der Tabelle und sollte auch horizontal scrollbar sein.

JSFIDDLE HORIZONTALER ROLLSTAB

Ich habe versucht, sie zusammenarbeiten zu lassen, für eine feste Kopftabelle für vertikalen Bildlauf und horizontalen Bildlauf mit scrollbaren Kopfzeilen.

Ich habe das versucht:

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

Ich habe gerade doppelte Zeilen hinzugefügt, um die Tabelle scrollfähig zu machen. Wie kann man eine Tabelle vertikal (mit festem Header) und horizontal (mit scrollfähigem Header) scrollen lassen?

6
Rohit Bisht

Nach einer Weile bekam ich eine Lösung für meine Abfrage ... /. Lösung, um Tabellen vertikal und horizontal scrollbar zu machen und ansprechend zu sein

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

Hinweis: Gehen Sie zu jsFiddle, um es besser anzuzeigen.

2
Rohit Bisht

Sie können es so versuchen. Für mich geht das

Stil:

#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>
1
Bablu Ahmed