使用bootstrap4的可滚动表格主体

时间：2018-07-16 11:34:11

标签： html css bootstrap-4

使用 Bootstrap-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>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

4 个答案:

答案 0 :(得分：1)

我希望这就是您想要的

.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>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
      <div class="cl"></div>
    </table>
  
  </table>
</div>

答案 1 :(得分：1)

将display:block属性设置为表格后，您可以设置高度和宽度。

尝试一下： 

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

答案 2 :(得分：0)

.scroll-table tbody{
  height:150px;
  overflow:hidden;
  overflow-y:scroll;
}
  
.scroll-table > thead,tbody,tr,td,th{
  display:block;
}
  
.scroll-table thead tr,
.scroll-table tbody tr {
  margin:0;
}
  
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Table Modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Table Modal</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body container">
                <table class="table table-striped scroll-table">
                    <thead>
                    <tr class="row">
                        <th class="col-sm-4">First Name</th>
                        <th class="col-sm-4">Last Name</th>
                        <th class="col-sm-4">E-mail</th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr class="row">
                            <td class="col-sm-4">Ali Aslan</td>
                            <td class="col-sm-4">Test</td>
                            <td class="col-sm-4">aliaslan@email.com</td>
                        </tr>
                        <tr class="row">
                            <td class="col-sm-4">Ali Aslan</td>
                            <td class="col-sm-4">Test</td>
                            <td class="col-sm-4">aliaslan@email.com</td>
                        </tr>
                        <tr class="row">
                            <td class="col-sm-4">Ali Aslan</td>
                            <td class="col-sm-4">Test</td>
                            <td class="col-sm-4">aliaslan@email.com</td>
                        </tr>
                        <tr class="row">
                            <td class="col-sm-4">Ali Aslan</td>
                            <td class="col-sm-4">Test</td>
                            <td class="col-sm-4">aliaslan@email.com</td>
                        </tr>
                        <tr class="row">
                            <td class="col-sm-4">Ali Aslan</td>
                            <td class="col-sm-4">Test</td>
                            <td class="col-sm-4">aliaslan@email.com</td>
                        </tr>
                        <tr class="row">
                            <td class="col-sm-4">Ali Aslan</td>
                            <td class="col-sm-4">Test</td>
                            <td class="col-sm-4">aliaslan@email.com</td>
                        </tr>
                        <tr class="row">
                            <td class="col-sm-4">Ali Aslan</td>
                            <td class="col-sm-4">Test</td>
                            <td class="col-sm-4">aliaslan@email.com</td>
                        </tr>
                        <tr class="row">
                            <td class="col-sm-4">Ali Aslan</td>
                            <td class="col-sm-4">Test</td>
                            <td class="col-sm-4">aliaslan@email.com</td>
                        </tr>
                        <tr class="row">
                            <td class="col-sm-4">Ali Aslan</td>
                            <td class="col-sm-4">Test</td>
                            <td class="col-sm-4">aliaslan@email.com</td>
                        </tr>
                        <tr class="row">
                            <td class="col-sm-4">Ali Aslan</td>
                            <td class="col-sm-4">Test</td>
                            <td class="col-sm-4">aliaslan@email.com</td>
                        </tr>



                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

答案 3 :(得分：-1)

或者您可以使用它。

.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>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
      <div class="cl"></div>
    </table>
  
  </table>
</div>

相关问题
最新问题