Question

我从http://www.tutorialrepublic.com/获取此HTML代码：

<!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>johncarter@mail.com</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>peterparker@mail.com</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>johnrambo@mail.com</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>

如何添加滚动条（上下）＆amp; （左 - 右）使用bootstrap而不影响网页的宽度？就像我希望它在我向表中添加另一行和列时显示固定列（4）和行（5）。如果我在表中添加另一个，我的网页似乎会扩展。就像我上面发布的代码一样，它必须具有固定的高度和宽度到网页。有没有办法做到这一点？

Answer 1

添加此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

Answer 2

设置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; 
 }

如何使用bootstrap添加滚动条？

2 个答案: