Прокручиваемое тело таблицы с помощью bootstrap4

Используя Бутстрап-4, я не могу применить прокрутку для тела таблицы с фиксированным заголовком. Я использую минимальную высоту, а также переполнение для применения прокрутки к телу таблицы. Bootstrap4 не поддерживает прокрутку в теле таблицы? Нижеприведенный фрагмент объясняет проблему более четко.

Я где-то ошибаюсь?

.tbody {
  min-height:10px;
  overflow-y:scroll;
}

 <meta charset = "utf-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1">
  <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  
  
  <div class = "container">
          
  <table class = "table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody class = "tbody">
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
</div>

вы хотите, чтобы прокрутка была горизонтальной?

— 16.07.2018 13:46

html css bootstrap-4

16.07.2018 13:34

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

19 233

Ответы 3

Я надеюсь это то, что вы искали

.tbody {
  height: 50px !important;
  overflow-y: scroll;	
}
   
.my-tbody {
  height:30px;
  display:block;
  overflow-y:scroll;
  width:100%;
}

tbody {
  width: 100%;
}

tr {
  width: 100%;
}

td {
  width: 33.33%;

<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  
  
  <div class = "container">
          
  <table class = "table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <table class = "my-tbody">
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
      <div class = "cl"></div>
    </table>
  
  </table>
</div>

спасибо за ответ, но столбец не выровнен, если используется блок отображения

— 16.07.2018 13:56

Пожалуйста, посмотрите, полезно ли это, и если нет, дайте мне знать, какой вид прокрутки и к каким элементам вы хотите применить Спасибо :)

— 16.07.2018 14:20

я добавил для вас еще один ответ, пожалуйста, посмотрите

— 16.07.2018 14:36

16.07.2018 13:50

или вы можете использовать это.

.tbody {
  height: 50px !important;
  overflow-y: scroll;	
}

.my-tbody {
  height:50px;
  display:block;
  overflow-y:scroll;
  width:100%;
}

tbody {
  width: 100%;
}

tr {
  width: 100%;
}

td {
  width: 33.33%;

<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  
  
<div class = "container">
          
  <table class = "table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <table class = "my-tbody">
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
      <div class = "cl"></div>
    </table>
  
  </table>
</div>

столбцы по-прежнему не соответствуют заголовку таблицы

— 03.04.2019 00:39

16.07.2018 14:34

После установки свойства display:block в таблицу вы можете установить высоту и ширину.

Попробуй это:

table {
  display:block;
  height : <set your desired height>;
  overflow-y : scroll;
}

Если бы я был OP, я бы проверил это как ответ ?

— 18.02.2021 21:34

К сожалению, необходим display:block, так как в некоторых случаях таблица выглядит плохо. Я пробовал без блока и с другими, но display: block - единственный вариант. CSS - это такая боль.

— 29.04.2021 14:11

16.07.2018 14:48