Как добавить полосы прокрутки с помощью бутстрапа?

я этот HTML код взят из http://www.tutorialrepublic.com/:Как добавить полосы прокрутки с помощью бутстрапа?

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Example of Bootstrap 3 Simple Tables</title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
<style type="text/css"> 
    .bs-example{ 
     margin: 20px; 
    } 
</style> 
</head> 
<body> 
<div class="bs-example"> 
    <div class="table-responsive"> 
     <table class="table table-bordered"> 
      <thead> 
       <tr> 
        <th>Row</th> 
        <th>First Name</th> 
        <th>Last Name</th> 
        <th>Email</th> 
        <th>Biography</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>1</td> 
        <td>John</td> 
        <td>Carter</td> 
        <td>johnc[email protected]</td> 
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.</td> 
       </tr> 
       <tr> 
        <td>2</td> 
        <td>Peter</td> 
        <td>Parker</td> 
        <td>[email protected]</td> 
        <td>Vestibulum consectetur scelerisque lacus, ac fermentum lorem convallis sed. Nam odio tortor, dictum quis malesuada at, pellentesque.</td> 
       </tr> 
       <tr> 
        <td>3</td> 
        <td>John</td> 
        <td>Rambo</td> 
        <td>[email protected]</td> 
        <td>Integer pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel, porttitor bibendum enim.</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 
</body> 
</html>

Как добавить полосу прокрутки (вверх-вниз) & (слева направо) с использованием начальной загрузки, не затрагивая ширину веб-страницы? Как я хочу, чтобы он имел фиксированный столбец (4) и строку (5) для отображения, когда я добавляю в таблицу еще одну строку и столбцы. Если я добавлю другую в таблицу, моя веб-страница, похоже, будет расширяться. как и код, который я пишу выше, например, он должен иметь фиксированную высоту и ширину на веб-странице. Есть ли способ сделать это?

источник

2015-05-22 laurence keith albano

Добавить эту CSS

thead, tbody { display: block; } 
tbody { 
    height: 100px;  /* Just for the demo   */ 
    overflow-y: auto; /* Trigger vertical scroll */ 
    overflow-x: hidden; /* Hide the horizontal scroll */ 
}

Благодаря hashem-qolami

Для получения дополнительной информации Read this post

источник

2015-05-22 12:34:42 sheshadri

Спасибо, сэр, это работает! :), но повлияет ли это на этот формат, если этот код имеет доступ к мобильному телефону.? –

да он работает в мобильном режиме также ..... С удовольствием ... – sheshadri

спасибо. :) Ум я добавлю еще , чтобы этот код был дружественным для мобильных устройств, и он не повлияет на его текущий формат? –

Set max-height и max-width свойства CSS, чтобы показать ваше желаемое количество Rows и Columns и установить overflow-y:scroll; и overflow-x:scroll;. Как

.table-responsive{ 
    max-height: 250px; 
    max-width: 100px; 
    overflow-y:scroll; 
    overflow-x:scroll; 
}

источник

2015-05-22 12:37:02 mansoor

этот работа тоже сэр, спасибо за усилие. :) –

Как добавить полосы прокрутки с помощью бутстрапа?

ответ

Смежные вопросы