Вопросы Теги

Bootstrap 4 таблица адаптивного прокрутки

Вы можете использовать библиотеку GALocalstorage, и она отлично работает на мобильных устройствах

. Легко настроить

, и это все, никаких изменений или чего-либо еще.

Вам нужно создать Website Account в Google analytics, чтобы использовать эту библиотеку

blockquote>

Library на GitHub

0
задан Peter 17 January 2019 в 15:08
поделиться

2 ответа

Вам это нравилось?

Измените свой CSS следующим образом 

.custom-table> tbody {
    display:block;
    height:50px;
    overflow:auto;
}
.custom-table> thead, tbody tr {
    display:table;
    width:100%;         
}
.custom-table> thead {
    width:   100%   
}
.custom-table {
    width:100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="table-responsive">
  <table class="table table-striped table-hover custom-table text-nowrap">
    <thead>
      <tr>
        <th>row1</th>
        <th>row2</th>
        <th>row2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>text1</td>
        <td>text2</td>
        <td>text3</td>
      </tr>
      <tr>
        <td>text4</td>
        <td>text5</td>
        <td>text6</td>
      </tr>
      <tr>
        <td>text7</td>
        <td>text8</td>
        <td>text9</td>
      </tr>
    </tbody>
  </table>
</div>

0
ответ дан Udara Kasun 17 January 2019 в 15:08
поделиться

Пожалуйста, проверьте ниже, я предпочитаю использовать flexbox. Я также использую префиксы -webkit и -ms для большей кросс-браузерной совместимости 

  tbody , thead {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  tr {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  th,td {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
  }

  tbody {
     height: 50px;
     overflow-y: auto;
  }

  thead {
    padding-right: 20px;
  }

Я установил padding-right на thead из-за полосы прокрутки на tbody.

0
ответ дан Αntonis Papadakis 17 January 2019 в 15:08
поделиться